Javascript 通过通过道具传递的HTML呈现组件

我目前正在一个项目中使用react habitat，我有如下组件渲染

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

我遇到了一个问题，我试图从一个富文本编辑器中传递一些标记，该编辑器包含如上面示例所示的标记

我希望能够呈现包含引用的富文本

因此，上面的引用基本上可以通过富文本传递，并且仍然可以作为react组件呈现出来

---

这可能吗

像这样的事情可能会有帮助

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

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

函数createMarkup（）{
返回{uuuuhtml:''}；
}
函数MyComponent（）{
返回；
}

---

但这是一种非常危险的做法，可能会让您的用户遭受跨站点脚本（XSS）攻击

我是React Habitat的原始作者

您将遇到将HTML放入属性字符串的问题。是

我只是将HTML放入habitat组件中，然后使用它

乙二醇

或者

你可以把它放在一个隐藏的房间里

 <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" />

---

抱歉，伙计，这不是我的意思-我知道如何传递HTML，但我想用HTML传递react-habitat引用，它会用道具加载到正确的react组件中

 constructor(props) {
      super(props);

      const html = props.proxy.innerHTML;
 }

 <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;
 }