如何在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"));？