React学习笔记14-dangerousSetinnerHtml指令

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-21

14.React学习笔记14-dangerousSetinnerHtml指令2023-10-21

15.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

1.使用场景

dangerouslySetInnerHTML指令能将字符串当做html解析

相当于vue中的v-html指令

一般我们用来渲染富文本返回的html文本

2.使用方法

 {this.state.tolist.map((item,index)=>{
            return (
                <span dangerouslySetInnerHTML={{__html:item}} key={index}>
                </span>
            )
        })}

将这个指令绑定的一个html标签上即可

_html:要解析的htm代码

 

下面是将前面的tolist案例和dangerouslySetInnerHTML相结合

 

输入

<div style="color:red">红色</div>

 字符串被解析为了html代码

3.完整代码

import React, { Component } from 'react'
import './css/01-index.css'
export default class App extends Component {
    state = {
        tolist:[],
        inputValue:''
    }
  render() {
    return (
      <div>
        <input value={this.state.inputValue} onChange={
            this.changeHanlder
        } type="text" />
        <button onClick={
           this.addHanler
        }>add</button>
        {this.state.tolist.map((item,index)=>{
            return (
                <span dangerouslySetInnerHTML={{__html:item}} key={index}>
                </span>
            )
        })}
           <div className={this.state.tolist.length>0 ? 'hidden' : ""}>暂无代办事项</div>
      </div>
    )
  }
   changeHanlder = (e)=>{
        this.setState({
            inputValue:e.target.value
        })
  }
   addHanler = ()=>{
        if(this.state.inputValue !==''){
    const newlist = [...this.state.tolist]
    newlist.push(this.state.inputValue)
    this.setState({
        tolist:newlist,
        inputValue:''
    })
}
  }
}