react中渲染标签的两种写法

270 阅读1分钟

使用场景

把标签字符串渲染成网页的样式

或者是对一段文字中某些地方加样式,我们就需要匹配正则,同时想让某些地方设置指定的样式。

const App: React.FC = () => {
    // 注意我这里写的是字符串,而且我这里的样式没有用react里面的写法,是我们正常写的行内样式
    const address = '<span style="color:red">张家界花果山</span>'
    const caoZuo = () => {
        // 这里的name我没有加字符串
        let name = <span>张三</span>
        let list = ['nihao',name]
        return list
    }
    return (
        <div>
            <div>你好世界</div>
            <div style={{color: 'red'}}>

                {caoZuo()}
            </div>
                <div dangerouslySetInnerHTML={{__html: address}}>
                </div>
         </div>

    )

};

image.png