我正在用React构建一些东西，我需要在JSX中插入带有React变量的HTML。有没有一种方法可以让一个变量像这样:
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';
然后像这样把它插入react，让它工作?
render: function() {
return (
<div className="content">{thisIsMyCopy}</div>
);
}
并让它按预期插入HTML ?我还没有见过或听说过任何一个react函数可以内联做这件事，或者一个解析东西的方法可以让它工作。
当前回答
import { Fragment } from 'react' // react version > 16.0
var thisIsMyCopy = (
<Fragment>
<p>copy copy copy
<strong>strong copy</strong>
</p>
</Fragment>
)
通过使用“the”将值设置为字符串，React无法知道它是HTML元素。您可以执行以下操作让React知道它是一个HTML元素-
去掉“，它就会工作 使用<Fragment>返回一个HTML元素。
其他回答
import { Fragment } from 'react' // react version > 16.0
var thisIsMyCopy = (
<Fragment>
<p>copy copy copy
<strong>strong copy</strong>
</p>
</Fragment>
)
通过使用“the”将值设置为字符串，React无法知道它是HTML元素。您可以执行以下操作让React知道它是一个HTML元素-
去掉“，它就会工作 使用<Fragment>返回一个HTML元素。
通过使用“你正在使它成为一个字符串。使用时没有倒逗号，它将工作良好。
const App = () => { const span = <span> whatever your string </span> const dynamicString = "Hehe"; const dynamicStringSpan = <span> {`${dynamicString}`} </span> return ( <div> {span} {dynamicStringSpan} </div> ); }; ReactDOM.render(<App />, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
你可以使用dangerouslySetInnerHTML，例如:
render: function() {
return (
<div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
);
}
请注意，如果您不知道正在注入的HTML字符串中有什么内容，那么dangerlysetinnerhtml可能是危险的。这是因为恶意客户端代码可以通过脚本标记注入。
如果您不能100%确定所呈现的HTML是XSS(跨站点脚本)安全的，那么通过诸如DOMPurify之类的实用程序来清除HTML字符串可能是一个好主意。
例子:
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>
);
}
试试Fragment，如果你不想要以上任何一种。
在你的情况下，我们可以写信
import React, {useState, Fragment} from 'react'
const thisIsMyCopy = Fragment('<p>copy copy copy <strong>strong copy</strong></p>')
render: function() {
return (
<div className="content">{thisIsMyCopy}</div>
);
}
如果你使用hook想要在某个条件下设置它的状态
const [thisIsMyCopy, setThisIsMyCopy] = useState(<Fragment><p>copy copy copy <strong>strong copy</strong></p></Fragment>);
