使用dangerouslySetInnerHTML中的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

老问题,但对于未来的想法者,我想我可能有一个解决方案,但请注意,redux如果你在你的项目中使用它肯定会打破你的流量.

基本上,你id的dangerousSetInnerHTML文字中应该有一些.
我的想法是在将"危险的HTML"挂载到DOM后,id在componentDidMount生命周期挂钩中挂载.

例如

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不会在组件更新时调用.有关这方面的更多信息,请参阅反应的生命周期钩子.

公平的警告,虽然这确实感到hacky,它是.这也有它的局限性,因为我上面提到的一些,但可以有时间,你有没有其他选择,只能使用dangerousSetInnerHTML在这样的时代,这是一个选项.在其他时候做@Rohit Singh Sengar的建议并尝试进行react.

Answer 2

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