发生反应，呈现部件

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