使用React钩子在两个div或文本之间切换

Question

首先，我是React和Hooks的新手。

我想做的是，当状态发生变化时，div或一些文本也会发生变化。

例如：

const App = ( ) => {
const [textToggle, textToggleState] = useState(true)
return (
<div>This is come text</div>
<div>This is come extra text</div>
<div onClick={ () => textToggleState(!textToggle) }>Click me</div>
);
};
export default memo(App);

因此，在这种情况下，我有一个切换按钮，它将在true或false状态之间切换。我通常使用这个方法从div中添加/删除类，例如：

<div className={textToggle ? "normal-class" : "super-class"}></div>

或者类似的东西。然而，我想实现的是在上面代码中显示前两个div之间进行切换，或者在启动切换时只在第一个div中添加单词extra。

我不太确定如何实现这一点，甚至不确定是否应该使用useState功能。

Answer 1

如果您只想相应地显示/隐藏每个div，请尝试此

{textToggle && <div>This is come text</div>}
{!textToggle && <div>This is come extra text</div>}

或简化

{
textToggle ?
<div>This is come text</div>
:
<div>This is come extra text</div>
}

如果你想添加extra文本，那么试试这个

<div>This is come {textToggle ? "" : "extra"} text</div>