在 jsx 中使用 css（在功能组件中更改样式）答案

【问题标题】：using css inside jsx(changing styles inside a functional component)在 jsx 中使用 css（在功能组件中更改样式）
【发布时间】：2021-04-10 21:50:20
【问题描述】：

我有一个功能组件，它呈现两个 div，我想在调用 onclick 函数时隐藏一个 div，它在另一个 div 上。我如何使用反应钩子实现它？这是我到目前为止所得到的。

const [hide, setHide] = useState(false);
const hidebox = ()=> setHide(true);


<div id="cartbox" onClick={hidebox}></div>

如何在此处更改 css 属性？

【问题讨论】：

试试这样的，codesandbox.io/s/react-functional-component-forked-lop2i

标签： reactjs jsx

【解决方案1】：

如果您想根据功能性 React 组件的状态动态更新元素的类，您可以执行以下操作 -

<div id="cartbox" onClick={hidebox} className={`${hide ? 'not-hidden' : 'hidden'}`}></div>

或者使用你可以做的内联样式

<div id="cartbox" onClick={hidebox} style={`${hide && 'display: none;'}`}></div>

【讨论】：

【解决方案2】：

这可以通过直接检查 state 属性来实现。如果隐藏则返回 null，如果不隐藏则返回 DOM

const [hide, setHide] = useState(false);

const hidebox = ()=> setHide(true);


<div id="cartbox" onClick={hidebox}></div>
{hide ? null : <div id="divToHide" onClick={hidebox}></div>}

【讨论】：