我正在用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函数可以内联完成这项工作,或者解析允许它工作的方法的任何事情。
发布于 2014-05-15 03:33:23
你可以用dangerouslySetInnerHTML,例如
render: function() {
return (
<div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
);
}
发布于 2017-08-10 22:54:21
dangerouslySetInnerHTML有很多缺点,因为它设置在标记中。
我建议你使用一些react包装器,就像我在npm上找到的一样。html-react-parser也做同样的工作。
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>
);
}
非常简单:)
发布于 2018-03-16 22:31:22
通过使用''
,您可以将其转换为字符串。使用时不使用反逗号,它可以很好地工作。
const span = <span> whatever your string </span>
const dynamicString = "Hehe";
const dynamicStringSpan = <span> {`${dynamicString}`} </span>
render () {
return (
<div>
{span}
{dynamicStringSpan}
</div>
);
}
https://stackoverflow.com/questions/23616226
复制相似问题