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

基本上，你id的dangerousSetInnerHTML文本中应该有一些。
我们的想法是要安装到该id在componentDidMount已经被安装到你的DOM“危险的HTML”后的生命周期挂钩。

例如

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不会在组件更新时调用。有关更多信息，请参阅react的生命周期钩子。

公平的警告虽然这确实让人感觉很糟糕，但确实如此。这也有我提到的一些之上，但可以有时间在这里你它的局限性有没有别的选择，只能使用dangerousSetInnerHTML在这样的时代，这是一个选项。其他时候按照@Rohit Singh Sengar 的建议去做，并尝试在react.

dangerouslySetInnerHTML需要一个具有__html属性的 JS 对象，该属性应该是有效的 HTML 标记。相反，您在<MySubComponent />那里提供并期望它呈现该组件的 html。React 不会<MySubComponent />在那里处理。dangerouslySetInnerHTML顾名思义，应该避免。此外，您在这里尝试完成的工作可以仅通过 React 轻松完成。

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

const MyComponent = React.createClass({
    render() {
        let subComponentList = [];
        [1,2,3,4,5].forEach(function(i){
            subComponentList.push(<MySubComponent key={i} index={i} />);
        }); 
        return (
            <ul>{subComponentList}</ul>
        );
    }
});

ReactDOM.render(<MyComponent />, mountNode);

另一种方法是打开一个react门户。确保元素已呈现，然后简单地

ReactDOM.createPortal(<YourComponent>,document.querySelector('selector'));

这是迄今为止我发现的最干净的方法来实现这一目标。