reactjs - 使用 React 钩子在两个 div 或文本之间切换
问题描述
首先,我是 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 之间进行更改,或者extra
在启动切换时只在第一个 div 中添加单词。
我不太确定如何实现这一点,甚至是否应该使用该useState
功能。
解决方案
如果你只想相应地显示/隐藏每个 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>
推荐阅读
- spring-boot - Spring数据:如何从多个Mongo集合中获取数据
- php - Netsuite API 抛出 400 错误请求
- r - 在 R 中合并多个 DF,寻找相似之处
- blazor - Blazorize 项目运行但忽略 NavMenu.razor
- python - python tkinter 标签++1
- android - 更新 Google 应用签名证书会破坏 Google Pay
- mysql - MySQL:总和(案例时(...))+ 分组。为什么即使使用 GROUP BY 也无法显示数据集的详细信息?
- regex - 多行正则表达式匹配
- python - 使用 openCV2 和 python 无法正确检测虹膜圈?
- javascript - 触发xhr请求的for循环内的Javascript setInterval和closeInterval