reactjs - react : using React component inside of dangerouslySetInnerHTML

Question

我有一个关于使用 React 的问题。正如您从标题中看到的，我想知道是否可以在 dangerouslySetInnerHTML 属性内使用 React 组件(由 React.createClass 创建)。我已经尝试过，但 React 只是打印代码而不进行如下转换:

const MySubComponent = React.createClass({
    render() {
        return (<p>MySubComponent</p>);
    }
});

...

let myStringHTML;
myStringHTML += "<ul>";
myStringHTML += "    <li>";
myStringHTML += "        <MySubComponent />";
myStringHTML += "    </li>";
myStringHTML += "</ul>";

const MyComponent = React.createClass({
    render() {
        return (
            <div dangerouslySetInnerHTML={{__html:myStringHTML}}></div>
        );
    }
});

我预料

<ul>
    <li>
        <p>MySubComponent</p>
    </li>
</ul>

但是代码与原始字符串相同，这意味着 React 没有转换 MySubComponent。

有办法解决这个问题吗？上面的例子很简单，但我的实际代码相当复杂。非常感谢帮我一下;)

Answer 1

老问题，但对于 future 的好奇者，我想我可能有一个解决方案，但请注意，如果您在项目中使用它，这肯定会破坏您的 redux 流程。

基本上，您的 dangerousSetInnerHTML 文本中应该有一些 id。
这个想法是在“危险的 HTML”挂载到 DOM 后，在 componentDidMount 生命周期 Hook 中挂载到该 id。

例如

const myStringHTML = `
  <div id="someid">
    some text in my dangerous html
  </div>
`;

const MySubComponent = React.createClass({
    render() {
        return (<p>MySubComponent</p>);
    }
});

...

let myStringHTML;
myStringHTML += "<ul>";
myStringHTML += "    <li>";
myStringHTML += "        <MySubComponent />";
myStringHTML += "    </li>";
myStringHTML += "</ul>";

const MyComponent = React.createClass({

    componentDidMount() {
      ReactDOM.render(<MyComponent />, document.querySelector('#someid'));
    }

    render() {
        return (
            <div dangerouslySetInnerHTML={{__html: myStringHTML}}></div>
        );
    }
});

请注意，组件更新时不会调用 componentDidMount。有关详细信息，请参阅 lifecycle hook of react .

公平警告，尽管这确实让人感觉hacky，而且确实如此。正如我上面提到的，这也有其局限性，但有时您可能没有其他选择，只能使用 dangerousSetInnerHTML，在这种情况下，这是一个选项。其他时候，按照 @Rohit Singh Sengar 的建议进行操作，并尝试在 react 中进行操作。