Как динамически декларируют компоненты

Question

С:

this.props.components = [{component: input}, {component: button}] 

В этом коде:

var React = require('react'); 

var form = React.createClass({ 
    render: function() { 
     var components = []; 
     var component = null; 
     //console.log(this.props.components); 
     for (var i=0; i < this.props.components.length; i++) { 
      console.log(this.props.components[i]); 
      component = this.props.components[i].component; 
      components.push(<component />); 
     } 
     console.log(components); 
     return (
      <div> 
       {components} 
      </div> 
     ); 
    } 
}); 

module.exports = form; 

Моя проблема заключается в том, что вместо того, чтобы вынести DIV, содержащий вход и кнопку его визуализацию два недействительных элементов типа "компонент". Любые идеи?

Answer 1

Если вы уже прошли в ваших компонентов к вашему form классу так:

<Form 
    components={[ 
     {component: <input />}, 
     {component: <button></button>}]} 
/> 

, то вам не нужно обернуть <component /> в JSX как это, так как вы уже оказали свои компоненты. Только:

for (var i = 0; i < this.props.components.length; i++) { 
    component = this.props.components[i].component; 
    components.push(component); 
}