反应：从函数内部渲染组件

有什么方法可以使下列工作？例如，我想将“欢迎”传递给onClick事件，并且它应该将具有该名称的组件呈现给指定的DIV。我想它可以动态命名，但我能满足于开关（指数）:)反应：从函数内部渲染组件

var Menu = React.createClass({ 
    getInitialState: function() { 
     return {data: []}; 
    }, 
    componentDidMount: function() { 
     // do something 
    }, 
    menuClick: function(index) { 
     render(
      <{index} />, 
      document.getElementById('content') 
     ); 
    }, 
    render: function() { 
     return (
      <span> 
       <span className="menuLink" onClick={this.menuClick.bind(this, "welcome")}>Home</span>&nbsp; 
       <span className="menuLink" onClick={this.menuClick.bind(this, "management")} >Generator Management</span>&nbsp; 
       <span className="menuLink" onClick={this.menuClick.bind(this, "about")}>About Us</span> 
      </span> 
     ); 
    } 
});

来源

2015-07-03 Kokesh

不确定你在'menuClick'函数中如何调用'render'。看起来你可能需要将它构造成2-3个不同的组件。 –

如果选择了“”欢迎“”，那么你想要渲染什么“<{index} />”？ –

@DavinTryon是的。我有组件的欢迎，管理......我想把它们渲染到“内容”div。 – Kokesh

你可以选择到不使用JSX在这种情况下：

menuClick: function(index) { 
     render(
      React.createElement(index, null, ''), 
      document.getElementById('content') 
     ); 
    },

来源

2015-07-03 10:35:01

这实际上什么都不做，我得到一个错误“渲染未定义”。如果我添加React。在渲染之前，一旦我点击某物，内容div就会变空。我有欢迎和其他菜单引用组件工作。 – Kokesh

您可以使用该组件的state为什么不使用react-router做到这一点

var Menu = React.createClass({ 
     getInitialState: function() { 
     return { 
      data: [], 
      message: null 
     }; 
     }, 
     componentDidMount: function() { 
     // do something 
     }, 
     menuClick: function(index) { 
     this.setState({ 
      message: index 
     }); 
     }, 

     getText: function() { 
     if (this.state.message) { 
      return (
      <h1>{this.state.message}</h1> 
     ); 
     } 
     return null; 
     } 

     render: function() { 
     return (
      <div> 
      <span> 
       <span className="menuLink" onClick={this.menuClick.bind(this, "welcome")}>Home</span>&nbsp; 
       <span className="menuLink" onClick={this.menuClick.bind(this, "management")} >Generator Management</span>&nbsp; 
       <span className="menuLink" onClick={this.menuClick.bind(this, "about")}>About Us</span> 
      </span> 
      {this.getText()} 
      </div> 
     ); 
     } 
    });

来源

2015-07-03 11:49:59 andykenward

这是否渲染了名为message的组件？ – Kokesh

不，它会改变'state'并根据它来渲染html。你可以用''替换'{this.getText（）}'。 – andykenward

，它是由特别是对那些目的。

来源

2015-07-03 22:34:30 gor181

反应：从函数内部渲染组件

回答

相关问题