上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

react中渲染标签的两种写法

[复制链接]
  • TA的每日心情
    开心
    2024-7-16 15:40
  • 签到天数: 276 天

    [LV.8]以坛为家I

    115

    主题

    460

    回帖

    997

    积分

    荣誉开发者

    积分
    997

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2022-12-6 20:31:17 | 显示全部楼层 | 阅读模式

    使用场景

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

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

    正确写法

    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

    接脚本定制
    I frequently record, because want to leave something.
  • TA的每日心情
    开心
    3 天前
  • 签到天数: 213 天

    [LV.7]常住居民III

    305

    主题

    4197

    回帖

    4061

    积分

    管理员

    积分
    4061

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-12-7 09:36:17 | 显示全部楼层
    反复看了几遍没有看懂这文
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    60

    回帖

    89

    积分

    初级工程师

    积分
    89
    发表于 2022-12-7 14:31:57 | 显示全部楼层
    王一之 发表于 2022-12-7 09:36
    反复看了几遍没有看懂这文

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

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

    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-7-16 15:40
  • 签到天数: 276 天

    [LV.8]以坛为家I

    115

    主题

    460

    回帖

    997

    积分

    荣誉开发者

    积分
    997

    荣誉开发者油中2周年卓越贡献生态建设者油中3周年

    发表于 2022-12-7 21:15:49 | 显示全部楼层
    王一之 发表于 2022-12-7 09:36
    反复看了几遍没有看懂这文

    可能哥哥没有遇到这个问题吧,我也不知道怎么表述了。遇到类似的问题可能就懂了
    接脚本定制
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情

    2024-8-14 16:46
  • 签到天数: 69 天

    [LV.6]常住居民II

    6

    主题

    127

    回帖

    222

    积分

    高级工程师

    积分
    222

    油中2周年生态建设者

    发表于 2022-12-8 09:10:14 | 显示全部楼层
    无法理解React的这种写法,感觉完全就是把需求复杂化了,也没比原生的方法省略多少代码
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表