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

在render中调用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

正如您所建议的那样，您必须存储所选项目的某个位置;例如，在组件的状态中，然后显示相应的组件。

REFERENCES

或者您可以使用React Router 将当前所选项目存储在网址中。

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

在React中，您将如何动态呈现组件？

2 个答案: