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 (
        
            

                 this.getValue(e)}/>
                 this.addTask()}>提交
            

            

                {task.map((item, index) => {
                    return 
 this.deleteTask(index)}>{item}
                })}
            

			 

                {task.map((item, index) => {
                    return 
 this.deleteTask(index)}
                               dangerouslySetInnerHTML={{__html:item}}/>
                })}
            
        
     )
  }
}