如何在 React 中动态渲染组件

Question

我已经开发了一个组件基础应用程序，其中我开发了一个不同的组件，但是在渲染时我必须根据当前我尝试过的用户操作进行渲染。

我的组件看起来像：

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

但它不起作用我的意思是在页面上没有渲染。

我只是想知道我们如何在 React 中实现动态渲染。

提前致谢。

Answer 1

也许React.render(<CustomComponent inputType={Item} />,document.getElementById("secondCol"));？