论坛 › 网页开发 › react中渲染标签的两种写法

wwwwwllllk 发表于 2022-12-6 20:31:17

react中渲染标签的两种写法

# 使用场景

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

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

正确写法

```js
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>

    )

};
```

!(data/attachment/forum/202212/06/203056ibalv7oslu4zo7cc.png)

王一之 发表于 2022-12-7 09:36:17

反复看了几遍没有看懂这文{:4_86:}

shabby 发表于 2022-12-7 14:31:57

王一之 发表于 2022-12-7 09:36
反复看了几遍没有看懂这文

这哥们的帖子语言表述方向有点问题，他发的文章很多都是代码截图配几个文字笔记

他发的不像是文章，应该算是个人笔记，哈哈，反正我是看不懂他的笔记

wwwwwllllk 发表于 2022-12-7 21:15:49

王一之 发表于 2022-12-7 09:36
反复看了几遍没有看懂这文

可能哥哥没有遇到这个问题吧，我也不知道怎么表述了。遇到类似的问题可能就懂了{:4_115:}

极品小猫 发表于 2022-12-8 09:10:14

无法理解React的这种写法，感觉完全就是把需求复杂化了，也没比原生的方法省略多少代码

查看完整版本: react中渲染标签的两种写法