React中正常显示HTML---dangerousSetInnerHtml

运行以下代码的时候出现了html的标签,

后在li标签中加上dangerouslySetInnerHTML={{__html:item}}，html的内容得以正常显示

import React, {Component, Fragment} from 'react'
export default class TodoList extends Component {
constructor(props) {
    super(props)
    this.state = {
        task: ['学英语', 'react', 'vue'],
        newTask: ''
    }
}

getValue(e) {
    this.setState({newTask: e.target.value})
}

addTask() {
    //使用ES6新特性展开运算符
    this.setState({task: [...this.state.task, this.state.newTask], newTask: ''})
}

deleteTask(id) {
    const arr = this.state.task
    arr.splice(id, 1)
    this.setState({task: arr})
}

render() {
    const {task} = this.state
    return (
        <Fragment>
            <div>
                <input placeholder='请输入学习内容'
                       value={this.state.newTask}
                       onChange={(e) => this.getValue(e)}/>
                <button onClick={() => this.addTask()}>提交</button>
            </div>

            <ul>
                {task.map((item, index) => {
                    return <li key={index} onClick={() => this.deleteTask(index)}>{item}</li>
                })}
            </ul>

			 <ul>
                {task.map((item, index) => {
                    return <li key={index}
                               onClick={() => this.deleteTask(index)}
                               dangerouslySetInnerHTML={{__html:item}}/>
                })}
            </ul>
        </Fragment>
     )
  }
}