使用React Variable Statements（JSX）插入HTML

作者: 早岁那知世事艰
发布时间: 2024-12-13 12:42:49 (2月前)
转自：

9 条回复

0#
回复此人
筱梨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 为了避免linter错误，我使用它像这样： </p> <pre> <code> render() { const props = { dangerouslySetInnerHTML: { __html: '<br/>' }, }; return ( <div {...props}></div> ); } </code> </pre> </DIV>

编辑
1#
回复此人
听风～ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> import { Fragment } from 'react' // react version > 16.0 var thisIsMyCopy = ( <Fragment> <p>copy copy copy  <strong>strong copy</strong> </p> </Fragment> ) </code> </pre> <P> 通过使用''将值设置为字符串，React无法知道它是HTML元素。您可以执行以下操作让React知道它是一个HTML元素 - </p> <OL> <LI> 除掉 <code> '' </code> 它会起作用 </LI> <LI> 使用 <code> <Fragment> </code> 返回一个HTML元素。 </LI> </醇> </DIV>

编辑
2#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果有人还在这里。使用ES6，您可以像这样创建html变量： </p> <pre> <code> render(){ var thisIsMyCopy = ( <p>copy copy copy <strong>strong copy</strong></p> ); return( <div> {thisIsMyCopy} </div> ) } </code> </pre> </DIV>

编辑
3#
回复此人
敢嫁就敢娶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 注意 <code> dangerouslySetInnerHTML </code> 如果你不知道你注入的HTML字符串是什么，可能会很危险。 </强> 这是因为可以通过脚本标记注入恶意客户端代码。 </p> <P> 通过诸如的实用程序清理HTML字符串可能是个好主意的<strong> <a href="https://github.com/cure53/DOMPurify" rel="noreferrer"> DOMPurify </A> </强> 如果您不是100％确定您正在呈现的HTML是安全的XSS（跨站点脚本）。 </p> <P> 例： </p> <pre> <code> import DOMPurify from 'dompurify' const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; render: function() { return ( <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div> ); } </code> </pre> </DIV>

编辑
4#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 通过使用 <code> '' </code> 你正在把它变成字符串。使用没有引号可以正常工作。 </p> </DIV>

编辑
5#
回复此人
机器设备维修 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用 <a href="https://stackoverflow.com/questions/19266197/reactjs-convert-to-html"> dangerouslySetInnerHTML </A> ，例如 </p> <pre> <code> render: function() { return ( <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div> ); } </code> </pre> </DIV>

编辑
6#
回复此人
绵绵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <a href="https://stackoverflow.com/questions/19266197/reactjs-convert-to-html"> dangerouslySetInnerHTML </A> 有许多缺点，因为它设置在标签内。 </p> <P> 我建议你使用一些反应包装，就像我在npm找到一个为此目的。 <a href="https://www.npmjs.com/package/html-react-parser" rel="noreferrer"> HTML的反应解析器 </A> 做同样的工作。 </p> <pre> <code> import Parser from 'html-react-parser'; var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; render: function() { return ( <div className="content">{Parser(thisIsMyCopy)}</div> ); } </code> </pre> <P> 非常简单：） </p> </DIV>

编辑
7#
回复此人
樱花弄๑•ั็•็ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您还可以在ReactDOM中包含此HTML，如下所示： </p> <pre> <code> var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>); ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app')); </code> </pre> <P> 这是两个链接 <a href="https://reactjs.org/docs/introducing-jsx.html" rel="nofollow noreferrer"> 链接 </A> 和 <a href="https://reactjs.org/docs/rendering-elements.html" rel="nofollow noreferrer"> LINK2 </A> 从React文档可能会有所帮助。 </p> </DIV>

编辑

登录后才能参与评论