javascript - 如何根据这些组件中定义的某些操作在页面上呈现不同的组件？

Question

如果我有以下 App 组件：

function App() {
  if(test)
    return <Component1 />;
  else
    return <Component2 />;
}

但是test(true/false) 的值取决于两个相应组件内的按钮。单击该按钮应翻转 的值test（即设置为trueif false，反之亦然）。我将如何实现这一点？

标签： javascriptreactjsuse-state

Answer 1

您test在 App 级别定义并传递回调

function App() {
  let [test, setTest] = useState(false)
  if(test)
    return <Component1 setTest={setTest}/>;
  else
    return <Component2 setTest={setTest}/>;
}

在组件内部，您可以实现翻转逻辑，例如

props.setTest(ps=>!ps);