ReactJS函数组件基于状态变更切换组件的实现问题

嘿，我来帮你搞定这个状态切换的问题～

你遇到的核心问题是：setPage 是 App 组件内部的状态更新函数，A 组件作为子组件没办法直接访问到它。React遵循单向数据流的原则，子组件要修改父组件的状态，必须通过父组件传递过来的回调函数才行。

下面是具体的修改方案：

步骤1：把setPage作为props传递给A组件 #

在App组件的switch分支里，渲染A的时候把setPage传进去；另外你的初始状态page是'list'，但switch里没处理这个情况，会导致组件渲染报错，所以要加上default分支：

function App() {
  const [page, setPage] = React.useState('list');
  switch(page) {
    case 'A':
      return(
        <div> {/* 注意：React组件里不要直接返回<body>，用div或Fragment包裹即可 */}
          <Home />
          <A setPage={setPage} />
        </div>
      )
    case 'B':
      return(
        <div>
          <Home />
          <B />
        </div>
      )
    default:
      // 初始状态默认渲染A页面
      return(
        <div>
          <Home />
          <A setPage={setPage} />
        </div>
      )
  }
}

步骤2：在A组件里接收并调用props中的setPage #

修改A组件，通过props接收setPage，然后在点击事件里调用它：

function A({ setPage }) { // 解构props拿到setPage
  return (
    <div>
      <div onClick={() => setPage('B')}>GoToB</div>
    </div>
  )
}

完整修改后的代码 #

function App() {
  const [page, setPage] = React.useState('list');
  switch(page) {
    case 'A':
      return(
        <div>
          <Home />
          <A setPage={setPage} />
        </div>
      )
    case 'B':
      return(
        <div>
          <Home />
          <B />
        </div>
      )
    default:
      return(
        <div>
          <Home />
          <A setPage={setPage} />
        </div>
      )
  }
}

function A({ setPage }) {
  return (
    <div>
      <div onClick={() => setPage('B')}>GoToB</div>
    </div>
  )
}

function B() {
  return (
    <div>test</div>
  )
}

额外小提示 #

• 不要在组件返回值里直接用<body>标签，React应用通常会挂载到页面已存在的<body>内的容器元素中，组件内部用div或<>（Fragment简写）包裹就好。
• 一定要处理switch的default分支，避免因为状态值不在case范围内导致组件返回undefined，引发渲染错误。

内容的提问来源于stack exchange，提问作者NP2000