Как визуализировать компонент в динамическом режиме

Question

Я разработал базовое приложение Component, в котором я разработал другой компонент, но во время рендеринга я должен отображать на основе действия пользователя, в настоящее время то, что я попробовал, упоминается ниже.

Мой компонент выглядит следующим образом:

var React = require('react'); 
var Constants = require('../constants/ActionTypes'); 
var ItemRelationStore = require('../stores/ItemRelationStore'); 
var ItemStore=require('../stores/ItemStore'); 
var TreeView=require('./TreeView.react'); 


var childNodes={}; 

function getItemRelationState() { 

    return { 

     Items:JSON.parse(JSON.stringify(ItemStore.getItem())), 
     Items1:JSON.parse(JSON.stringify(ItemStore.getItem1())) 


    }; 
} 
// Define main Controller View 
var ItemPage = React.createClass({ 
    // Get initial state from stores 
    getInitialState: function() { 
     return getItemRelationState(); 
    }, 

    // Add change listeners to stores 
    componentDidMount: function() { 


     ItemStore.CallItem("TenantId",this.props.MetaItemId,this.props.Key); 

     ItemStore.addChangeListener(this._onChange); 
    }, 

    // Remove change listers from stores 
    componentWillUnmount: function() { 
     ItemStore.removeChangeListener(this._onChange); 
    }, 

    // Render our child components, passing state via props 
    render: function() { 
     var itemslist; 
     if(this.props.Key==1) 
     { 
      itemslist=this.state.Items; 
     } 
     else 
     { 
      itemslist=this.state.Items1; 
     } 
     var metaid=this.props.MetaItemId; 
     childNodes= Object.keys(itemslist).map(function(item,index){ 
      return (
      { 

       title:itemslist[item].Name, 
       Id: itemslist[item].Id, 
       metaitemId:metaid 

      } 
      ) 
     }); 

     var tree= { 
      title: this.props.MetaItemName, 
      metaitemId:metaid, 
      childNodes: [ 
      {childNodes} 
      ] 
     }; 
     return (

       <div className="treeview"> 
       <TreeView node={tree}/> 
       </div> 

     ); 
    }, 

    // Method to setState based upon Store changes 
    _onChange: function() { 

     this.setState(getItemRelationState()); 
    } 
}); 

module.exports = ItemPage; 

Теперь, когда я использовал статический в другом компоненте, как

var Item=require('../../Item'); 
React.render(<Item MetaItemName={"Users"} MetaItemId={1} Key={1}/>,document.getElementById("firstCol")); 

то, что он работает нормально. но я хочу сделать динамически, так что я подготовил один CustomeComponent как

var React = require('react'); 
var Item=require('../Item'); 
var CustomComponent = React.createClass({ 
    // Get initial state from stores 
    getInitialState: function() { 
     return null; 
    }, 

    // Add change listeners to stores 
    componentDidMount: function() { 

    }, 
    componentWillReceiveProps: function(nextProps) { 
     // Load new data when the dataSource property changes. 
     if (nextProps.dataSource != this.props.dataSource) { 
      this.loadData(nextProps.dataSource); 
     } 
    }, 
    // Remove change listers from stores 
    componentWillUnmount: function() { 

    }, 

    // Render our child components, passing state via props 
    render: function() { 
     var InputType=this.props.inputType; 
     console.log(InputType); 
     return (

      <InputType/> 

     ); 
    }, 

    // Method to setState based upon Store changes 
    _onChange: function() { 

    } 
}); 

module.exports = CustomComponent; 

и я называю этот пользовательский компонент, как

React.render(<CustomComponent inputType="Item" />,document.getElementById("secondCol")); 

, но это не работает я хочу сказать, ничего не делают на стр.

Я просто хочу знать, как мы можем достичь динамического рендеринга в реактиве.

Спасибо заранее.

Answer 1

Возможно, React.render(<CustomComponent inputType={Item} />,document.getElementById("secondCol"));?