Reactjs：将组件传递给状态值答案

【问题标题】：Reactjs: Passing component to state valueReactjs：将组件传递给状态值
【发布时间】：2021-01-03 18:48:37
【问题描述】：

我正在尝试创建一个 Web 应用程序，我希望用户在不使用 React-Router 的情况下浏览它。将组件传递给状态并根据用户单击的内容进行更改是一种好习惯吗？示例如下：

import Intro from "./Intro"
import Chapter1 from "./Chapter1"

class MainPage extends React.Component {
    state = {
        currentView: <Intro/>,
    };

handleuserActions = (e) => {
        switch (e.key) {
            case "Intro":
                this.setState({ currentView: <Intro/> });
                break;
            case "Chapter1":
                this.setState({ currentView: <Chapter1/> });
                break;
            default:
                break;
        }
        
    };

render() {
        return (
         <>
         <Menu onClick={this.handleSideMenu}>
                <Menu.Item key="Intro">
                        Intro
                    </Menu.Item>
                    <Menu.Item key="Chapter1">
                        Chapter 1
                </Menu.Item>
         </Menu>
         {this.state.currentView}
         </>  
)
}

【问题讨论】：

标签： reactjs react-router navigation components

【解决方案1】：

将组件存储在 state 中并不是一个好的做法。状态适用于随时间变化的数据，render 负责管理 UI。

相反，您可以将布尔值或其他一些数据存储在可用于有条件地渲染组件的状态中。

例如，你可以把它翻译成这样的：

class MainPage extends React.Component {
  state = {
    currentView: 'Intro',
  };

  handleuserActions = (e) => {
    this.setState({ currentView: e.key });    
  };

  renderCurrentView = () => {
    switch (this.state.currentView) {
      case "Intro":
        return <Intro />;
      case "Chapter1":
        reutrn <Chapter1/>;
      default:
        return null;
  }

  render() {
    return (
       <>
         <Menu onClick={this.handleSideMenu}>
            <Menu.Item key="Intro">
              Intro
            </Menu.Item>
            <Menu.Item key="Chapter1">
              Chapter 1
            </Menu.Item>
         </Menu>
         {this.renderCurrentView()}
       </>  
    )
  }
}

【讨论】：