反應不渲染組件

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