React nicht Bestandteil Rendering

Question

Dies ist mein Code:

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

Daten an die render Funktion gesendet wird. Es scheint, dass die Eigenschaften irgendwie die Render-Funktion der Item nicht erreichen, da sie undefined erscheinen, wenn ich versuche, sie zur Konsole zu drucken.

Irgendwelche Ideen, warum dies passieren könnte?

Das Problem ist, dass nichts in die "parentDiv" gerendert wird. Es bleibt einfach leer. Bei der Überprüfung der Elemente kann ich jedoch zwei "span" -Kinder darunter sehen (die nicht in html oder anderswo als hier erstellt wurden). Aber diese Span-Elemente haben keinen Inhalt.

Answer 1

Ich denke, es gibt ein grundlegendes Problem für Ihren Code. Sie versuchen, 'a' und 'b' durch eine externe Funktion 'render' an Ihre reagierende Komponente zu übergeben, die scheinbar eine der Funktionen der Komponente aufruft. Das ist falsch.

Sie sollten "a" und "b" an Ihre React-Komponente RParent als Requisiten übergeben. Wenn sich der Wert von "a" und "b" ändert, wird die übergeordnete Komponente automatisch neu gerendert.

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