在 React 中有条件地渲染组件

Question

我是 React 新手，仍在学习我的方法。 我有一个反应页面，它呈现一个有 5 个按钮的组件。 我正在尝试根据单击的按钮呈现另一个组件。 我怎样才能做到这一点？

Answer 1

您可以通过使用 state 来实现这一点。 React 中的 useState 钩子和条件渲染对这个目标很有用。 有关它的更多信息： https://reactjs.org/docs/hooks-state.html

你的问题的例子：

function MyComponent() {
  const [isTextVisible, setIsTextVisible] = useState(false);
  
  return (
     <>
       <button onClick={() => { setIsTextVisible(true) }}>Click on Me!</button>
       { isTextVisible && <p>I am visible only after button click!</p> }
     <>
  )
}

在此示例中，当单击按钮时，isTextVisible state 将填充为真值。 当 isTextVisible 等于 true - 条件中的文本将可见。 文本可以很容易地被另一个组件替换。