Question

我有以下代码：

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 />，其中包含一个<Header />和一个<Main />。

<Main>管理要呈现的视图，<Header />具有更改当前视图的导航。仅当我将componentWillReceiveProps添加到<Main />时，此代码的编写方式才有效，但我读到它是一种反模式，甚至不建议使用。

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

注释：

我暂时不使用React Router或Redux。我想知道如何在香草React中完成
我知道我可以管理直接在<App />中呈现的视图。这只是我的问题的简化版本，我的兴趣在于知道如何在同一级别的组件之间传递信息。
我想找到一个解决方案，使我可以从多个位置控制视图，甚至可以从同一Main组件内部控制视图

Answer 1

一个解决方案就是这样：

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/>中的视图状态。在这种情况下，视图状态将仅位于一个位置，即<App/>中，并且您不必像现在所做的那样在<Main/>中复制它。因为通常不建议使用重复状态，这就是导致需要componentWillReceiveProps的原因，正如您指出的那样，这是反模式。

一个组件，用于在同一级别上管理另一个组件的渲染

1 个答案: