Question

这是我的代码：

var Item = React.createClass({
    render: function () {
        return (
                React.createElement('div', {},
                        React.createElement('span', {}, this.props.a),
                        React.createElement('span', {}, this.props.b)
                        )
                );
    }
});

var RParent = React.createClass({
    getInitialState: function () {
        return {messages: []};
    },
    addMess: function (data) {
        var self = this;
        self.state.messages.push({
            a: data.a,
            b: data.b
        });
        this.setState({messages: self.state.messages});
    },
    render: function () {
        var messages = this.state.messages;
        return (
                React.createElement('div', {},
                        React.createElement(Item, messages))
                );
    }
});

var box = ReactDOM.render(React.createElement(RParent), document.getElementById('parentDiv'));

function render(a, b) {
    box.addMess({
        a: a,
        b: b
    });
}

将数据发送到render功能。当我尝试将它们打印到控制台时，似乎某些属性没有达到Item的渲染功能，因为它们似乎是undefined。

为什么会发生这种情况的任何想法？

问题是没有任何东西被渲染到“parentDiv”中。它只是空白。但是，在检查元素时，我仍然可以看到它下面有两个“span”子节点（它们不是用html创建的，也不是除了这里以外的任何其他地方）。但那些跨度元素没有内容。

Answer 1

我认为您的代码存在根本问题。您试图通过外部函数'render'将'a'和'b'传递给您的react组件，该函数似乎是调用组件的一个函数。这是错误的。

你应该将'a'和'b'传递给你的React组件RParent作为道具。每当'a'和'b'的值发生变化时，您的父组件将自动重新渲染。

var Item = React.createClass({
render: function () {
    return (
            React.createElement('div', {},
                    React.createElement('span', {}, this.props.a),
                    React.createElement('span', {}, this.props.b)
                    )
            );
}
});

var RParent = React.createClass({
getInitialState: function () {
    return {messages: []};
},
,
render: function () {
    var messages = this.props.messages;
    return (
            React.createElement('div', {},
                    React.createElement(Item, messages))
            );
}
});

ReactDOM.render(
    (<RParent messages= {'a': a, 'b': b} />)
    , document.getElementById('parentDiv'));

反应不渲染组件

1 个答案: