使用危险设置内部HTML中的React组件进行React

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。

有办法解决这个问题吗？上面的例子很简单，但是我的实际代码却很复杂。这将非常感谢gimme的帮助；）

Answer 1

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