反应不渲染组件

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或此处以外的其他任何地方创建的）。 但是那些span元素没有内容。

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