在 React 中，您将如何动态渲染组件？答案

【问题标题】：In React, how would you dynamically render a component?在 React 中，您将如何动态渲染组件？
【发布时间】：2016-09-28 10:59:11
【问题描述】：

我对执行相同任务的其他方法持开放态度。

我想按照以下方式做一些事情：

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 词汇来找到我正在寻找的解决方案。我也知道在渲染方法中设置状态是一个很大的禁忌，但我正在努力寻找替代方案。

感谢您的帮助。

【问题讨论】：

标签： reactjs menu components

【解决方案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}
  );

}

【讨论】：

【解决方案2】：

正如您所建议的，您必须将所选项目存储在某处；比如在组件的state，然后显示对应的组件。

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

或者您可以使用 React Router 将当前选定的项目存储在 url 中。

签出https://react-router.now.sh/quick-start。

【讨论】：