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);

因此，在这种情况下，我有我的切换按钮，它将在真或假状态之间切换。我通常使用它从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>

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

1 个答案: