通過通過道具傳遞的 HTML 渲染反應棲息地組件

Question

我目前正在一個項目中使用 react hat 並且我有如下所示的組件渲染

<div data-component="MyComponent" data-prop-titl="My title"></div>

我遇到了一個問題，我試圖從包含上述示例的標記的富文本編輯器傳遞一些標記。

我希望能夠使用內部的 react-habitat 組件引用來呈現富文本。

所以上面的引用基本上可以通過富文本傳遞，仍然可以作為react組件渲染出來。

這可能嗎？

Answer 1

可能像這樣的事情可能會有所幫助

function createMarkup() {
  return {__html: '<div data-component="MyComponent" data-prop-titl="My title"></div>'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

但這是一種非常危險的做法，可能會使您的用戶面臨跨站點腳本 (XSS) 攻擊

Answer 2

我是 React Habitat 的原作者。

您將遇到將 HTML 放入屬性字符串的問題。 它與 JSON 相同的問題

我只會讓 HTML 進入 habitat 組件，然后使用React Habitat 為您設置的代理變量。

例如

 <div data-component="MyWysiwygViewer">
     <h2>Some HTML text</h2>
     <p>With some body</p> 
 </div>

在組件中，我將通過以下方式獲取此數據：

 constructor(props) {
      super(props);

      const html = props.proxy.innerHTML;
 }

或者

你可以把它放在一個隱藏的div里

 <div id="myHtml" style="display: none" >
     <h2>Some HTML text</h2>
     <p>With some body</p> 
 </div>

 <div data-component="MyWysiwygViewer" data-prop-html-id="myHtml" />

然后在組件中，我將通過以下方式獲取此數據：

 constructor(props) {
      super(props);

      const html = document.getElementById(props.htmlId).innerHTML;
 }