Reactjs 在同一级别上管理另一个渲染的组件_Reactjs

Reactjs 在同一级别上管理另一个渲染的组件

reactjs

Reactjs 在同一级别上管理另一个渲染的组件,reactjs,Reactjs,我有以下代码： class Header extends Component { render() { return( <ul> <li><a onClick={() => this.props.onViewChange('home')}>Home</a></li> <li><a onClick={() => this.props.onViewC

我有以下代码：

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 />
      }
   }
}

类头扩展组件{
render（）{
返回(

this.props.onViewChange（'home'）}>home
this.props.onViewChange（'login'）}>login
this.props.onViewChange（'register'）}>register
this.props.onViewChange（'profile'）}>profile

)
}
}
类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.state=（{view:“home”}）
}
render（）
{
返回(
this.setState（{view:view}）}/>
)
}
}
类主扩展组件{
建造师（道具）{
超级（道具）
this.state={view:props.view}
}
render（）{
开关（this.state.view）{
案例“家”：
返回
案例“登录”：
返回
“登记册”一案：
返回
案例“简介”：
返回
}
}
}

如您所见，我有一个

，其中包含一个

和一个

管理正在呈现的视图，并且

具有更改当前视图的导航。如果我在

中添加

组件WillReceiveProps

，那么这段代码的编写方式只会起作用，但我发现它是一种反模式，甚至被弃用

管理这种情况的更好方法是什么

注意事项：

我暂时不使用React路由器或Redux。我想知道在香草中应该怎么做
我知道我可以管理在
中直接呈现哪个视图。这只是我问题的一个简化版本，我的兴趣在于知道如何在同一级别的组件之间传递信息
我想找到一个解决方案，使我能够从多个位置控制视图，甚至是从同一
```
主
```
组件内部

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 />
      }
   }
}

类主扩展组件{
render（）{
切换（this.props.view）{
案例“家”：
返回
案例“登录”：
返回
“登记册”一案：
返回
案例“简介”：
返回
}
}
}

组件将接收props

Main

Main

App

Main

this.setState（{view:view）}>

Main