發生反應，呈現部件

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'傳遞給你的反應組件，該外部函數似乎正在調用組件的某個功能。這是錯誤的。

您應該將道具上的'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'));