在React中，你将如何动态渲染一个组件？

Question

我接受执行相同任务的替代方法。

我想沿着以下的线路做一些事情：

Menu Item 1 
Menu Item 2 
Menu Item 3 

Target(Where component is loaded) 

在点击菜单项上，渲染目标内的相关部件。有没有办法动态加载组件？即

<{menuItemName} /> 

我现在这样做的方法是可怕的，缓慢的，和繁琐（和不工作），并涉及

<li onClick=this.setState({menuItem:"MenuItem1"})>Menu Item 1</li> 
<li onClick=this.setState({menuItem:"MenuItem2"})>Menu Item 2</li> 
<li onClick=this.setState({menuItem:"MenuItem3"})>Menu Item 3</li> 

<{this.state.menuItem} /> 

我知道一定有这样做的更好的方法，但我目前没有React词汇表来寻找我正在寻找的解决方案。我也意识到，在渲染方法中设置状态是一个很大的禁忌，但我正在努力寻找替代方案。

感谢您的帮助。

Answer 1

在渲染中调用setState是错误的，但是您只是附加了一个事件侦听器。即将到来的问题是一个jsx表示，它编译为React.createElement（ReactComponent，{}），其中第一个参数是React类（也可以是HTML元素的字符串）。检查这个问题的答案React/JSX Dynamic Component Name。

但是，解决你的问题，你可以做这样的事情

handleEventClick(itemId) { 
    return() => { 
    this.setState({ 
    itemId 
    }); 
    } 
} 

<li onClick={::this.handleEventClick("itemId")}>Item Name</li> 

render() { 
    const { itemId } = this.state; 
    let renderComponent; 
    if (itemId === 'menu1') { 
    renderComponent = <MenuComponent1 />; 
    } else if ....other components 

    return (
    ... 
    <li onClick={::this.handleEventClick("itemId")></li>... 
    {renderComponent} 
); 

} 

Answer 2

如你所说，你必须保存在某个地方选择的项目;例如在组件的状态然后显示相应的组件。

const Component1 = (props) => <div>My component 1</div>; 
const Component2 = (props) => <div>My component 2</div>; 
const Component3 = (props) => <div>My component 3</div>; 

// associate the item id with 
// the corresponding component 
const components = { 
    1: <Component1 />, 
    2: <Component2 />, 
    3: <Component3 />, 
} 

class MyApp extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { selectedItem: 1 } 
    } 

    handleItemClick(itemId) { 
    this.setState({ selectedItem: itemId }); 
    } 

    render() { 
    return (
     <div> 
     <li onClick={() => this.handleItemClick(1)}>Item 1</li> 
     <li onClick={() => this.handleItemClick(2)}>Item 2</li> 
     <li onClick={() => this.handleItemClick(3)}>Item 2</li> 
     {components[this.state.selectedItem]} 
     </div> 
    ); 
    } 
} 

或者可以店使用阵营路由器的URL当前选定的项目。

检查https://react-router.now.sh/quick-start了。