我如何在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组件，以便我可以在它们之间切换?我已经试了两天了，但是没有成功。

这是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>
</>
);
}

你甚至可以在状态中添加其他东西，比如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

您可以保存当前按钮的状态，然后使用对象查找有条件地显示不同的按钮:

检查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>
</>
);
}