reactjs - 一个组件在同一级别管理另一个组件的渲染

问题描述

我有以下代码：

class Header extends Component {
  render() {
    return(
       <ul>
         <li><a onClick={() => this.props.onViewChange('home')}>Home</a></li>
         <li><a onClick={() => this.props.onViewChange('login')}>Login</a></li>
         <li><a onClick={() => this.props.onViewChange('register')}>Register</a></li>
         <li><a onClick={() => this.props.onViewChange('profile')}>Profile</a></li>
       </ul>
    )
  }
}


class App extends Component {
  constructor(props) {
    super(props)
    this.state = ({ view: "home" })
  }

    render()
    {
       return (
         <div className="app">
           <Header onViewChange={(view) => this.setState({ view: view })} />
           <Main view={this.state.view} />
         </div>
       )
    }
}

class Main extends Component {
    constructor(props) {
      super(props)
      this.state = { view: props.view }
    }

    render() {
      switch (this.state.view) {
        case "home":
          return <Home />
        case "login":
          return <Login />
        case "register":
          return <Register />
        case "profile":
          return <Profile />
      }
   }
}

如您所见，我有一个<App />包含 a<Header />和 a 的 a <Main />。

<Main>管理正在呈现的视图，并<Header />具有更改当前视图的导航。编写此代码的方式只有在我添加一个componentWillReceivePropsto<Main />但我读到它是一种反模式时才有效，甚至已被弃用。

有什么更好的方法来处理这种情况？

笔记：

我暂时没有使用 React Router 或 Redux。我想知道应该如何在 vanilla React 中完成
我知道我可以管理直接在<App />. 这只是我的问题的简化版本，我的兴趣在于知道如何在同一级别的组件之间传递信息。
我想找到一个解决方案，让我可以从多个地方控制视图，即使是在同一个Main组件内部

标签： reactjs

一种解决方案是这样的：

class Main extends Component {


    render() {
      switch (this.props.view) {
        case "home":
          return <Home />
        case "login":
          return <Login />
        case "register":
          return <Register />
        case "profile":
          return <Profile />
      }
   }
}

您还可以传递一个回调来<Main/>更改<App/>. 在这种情况下，视图状态只会存在于一个地方，即 in <App/>，您不必<Main/>像现在这样在内部复制它。因为通常不建议复制状态，这就是导致componentWillReceiveProps您需要反模式的原因。

reactjs - 一个组件在同一级别管理另一个组件的渲染

问题描述

解决方案

推荐阅读