Question

我正在尝试创建一个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}
         </>  
)
}

Answer 1

将组件存储在状态中不视为一种好习惯。状态是指随时间变化的数据，渲染器负责管理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()}
       </>  
    )
  }
}

React.js：将组件传递给状态值

1 个答案: