如何在 ReactJS 中的 3 个组件之间切换

Question

我很难在 React 中有条件地渲染组件。 我已经成功地有条件地渲染了 2 个组件（A 和 B），但在我们的案例中找不到任何成功的方法来添加第三个组件（C）

这是 2 个组件的代码：

function App() {
  const [click, setClick] = useState(true);

  const ShowA = () => setClick(true);
  const ShowB = () => setClick(false);

  return (
    <>
      <br />

      <button onClick={ShowA}>A </button>

      <button onClick={ShowB}>B </button>

      <div className="App">
        {click && <div> A </div>}

        {!click && <div>B</div>}
      </div>
    </>
  );
}

有什么可能的方法可以添加第三个 C 组件，以便在它们之间切换？ 我已经尝试了2天，但没有成功。

如果有人感兴趣，这是 Codesandbox 的链接

https://codesandbox.io/s/musing-tesla-9gkpw?file=/src/index.js:100-481

Answer 1

您可以根据需要放置任意数量的状态：

  function App() {
    const [displayA, setDisplayA] = useState(true);
    const [displayB, setDisplayB] = useState(true);
    const [displayC, setDisplayC] = useState(true);

    const showA = () => {
      setDisplayA(true);
      setDisplayB(false);
      setDisplayC(false);
    }
    const showB = () => {
      setDisplayA(false);
      setDisplayB(true);
      setDisplayC(false);
    };
    const showC = () => {
      setDisplayA(false);
      setDisplayB(false);
      setDisplayC(true);
    };

    return (
      <>
        <br />
  
        <button onClick={showA}>A</button>
        <button onClick={showB}>B</button>
        <button onClick={showC}>C</button>
  
        <div className="App">
          {displayA && <div>A</div>}
          {displayB && <div>B</div>}
          {displayC && <div>C</div>}
        </div>
      </>
    );
  }

您甚至可以在 state 中放入其他内容，例如 JSX 元素：

  function App() {
    const [elementToDisplay, setElementToDisplay] = useState("");

    const showA = () => {
      setElementToDisplay(<div>A</div>)
    }
    const showB = () => {
      setElementToDisplay(<div>B</div>)
    }
    const showC = () => {
      setElementToDisplay(<div>C</div>)
    }

    return (
      <>
        <br />
  
        <button onClick={showA}>A</button>
        <button onClick={showB}>B</button>
        <button onClick={showC}>C</button>
  
        <div className="App">
          {elementToDisplay}
        </div>
      </>
    );
  }

Answer 2

您可以为当前按钮保存 state，然后使用 object 查找有条件地显示不同的按钮：

检查https://codesandbox.io/s/kind-haslett-b0fv0

function App() {
  const [currentButton, setCurrentButton] = useState('A');

  return (
    <>
      <br />

      <button onClick={() => setCurrentButton('A')}>A</button>
      <button onClick={() => setCurrentButton('B')}>B</button>
      <button onClick={() => setCurrentButton('C')}>C</button>

      <div className="App">
        {
          ({
            A: <div>A</div>,
            B: <div>B</div>,
            C: <div>C</div>
          })[currentButton]
        }
      </div>
    </>
  );
}