Question

我有从ajax返回的原始html标记。在React中渲染原始html并不容易。我尝试使用他们的dangerouslySetInnerHTML上下，但没有去，只有React抛出错误。 dangerouslySetInnerHTML真是模糊不清。

所以我决定将我的原始html编译成React组件并插入它。原始html被编译为React组件，但我无法插入它。这是我的代码。我想将<Html />组件（或原始html会更好）传递给<Tr />组件this.props.b：

var FooComponent = React.createClass({
    render: function() {
            var Html = React.createClass({
                render: function() {
                    return (
                        myRawHtmlMarkup
                    );
                }
            });

        return (
            <Tr id={key} a={value} b={Html} />
        );
    }
});

现在如何将原始html或<Html />插入DOM <td>元素？使用{this.props.b}不起作用。

这里重要的是，我无法将this.props.b更改为this.props.child，this.props.children等其他内容。我需要this.props.b，因为有一个循环父FooComponent组件，我使用许多this.props.b条件将值分配给if/else（为简单起见，上面未显示）：

var Tr = React.createClass({
    render: function() {
        return (
            <tr>
                <td className="idCol">{this.props.id}</td>
                <td className="aCol">{this.props.a}</td>
                <td className="bCol">{this.props.b}</td>
            </tr>
        );
    }
});

Answer 1

render组件中的Html方法会引发错误，因为组件需要返回有效的ReactComponent，而不是字符串。

我认为你可以解析HTML并在componentDidMount中作为孩子追加：https://jsfiddle.net/4z13gp7g/

var Tr = React.createClass({
    componentDidMount: function(){
    var div = document.createElement('div');
    div.innerHTML = this.props.b;
    this.refs.b.appendChild( div.firstChild )
  },
    render: function() {
        return (
            <tr>
                <td className="idCol">{this.props.id}</td>
                <td className="aCol">{this.props.a}</td>
                <td className="bCol" ref="b"></td>
            </tr>
        );
    }
});

ReactDOM.render(
   <Tr id="key" a="value" b="<p><strong>Hi</strong></p>" />,
   document.querySelector('table tbody')
);

Answer 2

你需要Html var的反应类吗？

如果没有，试试这个：

var FooComponent = React.createClass({
    render: function() {
        var Html = (myRawHtmlMarkup);

        return (
            <Tr id={key} a={value} b={Html} />
        );
    }
});

如何将React组件（或原始html）传递给其他React组件并插入？

2 个答案: