慕運維8079593
2019-10-06 15:10:56
我正在用React構建一些東西,我需要在JSX中插入帶有React變量的HTML。有沒有辦法像這樣一個變量:var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';并像這樣將其插入反應中并起作用?render: function() { return ( <div className="content">{thisIsMyCopy}</div> );}并按預期插入HTML嗎?我還沒有看到或聽到任何有關可以完成此內(nèi)聯(lián)的react函數(shù)的信息,也沒有聽說過任何使之能夠工作的解析方法。
3 回答

慕桂英546537
TA貢獻1848條經(jīng)驗 獲得超10個贊
危險地,SetInnerHTML有很多缺點,因為它在標記內(nèi)設置。
我建議您使用一些反應包裝,例如我為此在npm上找到的包裝。 html-react-parser執(zhí)行相同的工作。
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>
);
}
很簡單 :)

叮當貓咪
TA貢獻1776條經(jīng)驗 獲得超12個贊
您可以使用dragonallySetInnerHTML,例如
render: function() {
return (
<div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
);
}
添加回答
舉報
0/150
提交
取消