如何在 React JS 中重写 css 类？ [关闭]

Question

例如，我在样式表中有一个名为“track-your-order”的 css 类，现在在某个事件触发器上我必须更新“track-your-order”中的任何内容，并将更新后的类应用到同一个 div 中。我不是要切换它，而是要更新或更改或用用户将其赋予该 div 的新值替换相同的 css 类。

Answer 1

我认为您可以使用来自 npm styled-components 模块的 StyledWrapper。 所以如果你想让'track-your-order'变得动态，你可以简单地创建包含你的css新值的状态。

然后把它放在你的渲染中：

const StyledWrapper = styled.div`
  ${this.state.newStyles}
`;

不要忘记用<StyledWrapper></StyledWrapper> 包裹受影响的元素，或者只是将所有元素包裹在渲染中。更多文档：https://github.com/styled-components/styled-components

编辑：也不要忘记在状态中包含您的 css 类的名称。你的状态或多或少应该是这样的.track-your-order:{display:block}

Answer 2

您可以使用状态更新和三元运算符。

className={isEventTriggered? "updated-track-your-order": "track-your-order"}