如何在 pre/REACT 中渲染 html 元素答案

【问题标题】：How to render html element in pre / REACT如何在 pre/REACT 中渲染 html 元素
【发布时间】：2022-01-25 12:05:26
【问题描述】：

您好，我正在开发一个博客文章创建工具，当我在 textarea <hr/> 中写入时我需要一个引擎，或者当我写入 <img/> 时我得到一个图像但它没有呈现。

帖子写在textarea中，应该显示在div中。

怎么做？

const PostCreate = () => {
    const [postValue, changeValue] = useState('')
    const handleChangeValue = (e:any) => {
        changeValue(e.target.value)
        console.log(postValue);
    }
    return (
        <div className='postCreate'>
            Create New Post
            <textarea onChange={handleChangeValue} value={postValue}/>
            <div>
                {postValue}
            </div>
        </div>
    )
}

如果我写 <hr/> 我得到字符串 <hr/> 而不是一行：

【问题讨论】：

如果我理解正确，你想在文本区域写HTML标记？如果是这样，您需要使用special React API 将其呈现为 HTML 而不是文本。
dangerousSetInnerHtml 的文档中也提到了这一点，但我仍然想强调这样做时 XSS 攻击的风险。请确保清理您的输入。

标签： javascript reactjs

【解决方案1】：

您可以将dangerouslySetInnerHTML 属性用于div。

<div dangerouslySetInnerHTML={{ __html: postValue }} />

你可以在this文档上查看。

【讨论】：