- 已关闭**。此问题为opinion-based。当前不接受答案。
- 想要改进此问题吗？**请更新问题，以便editing this post可以使用事实与引用来回答.
6小时前关门了。
Improve this question
我有一个显示错误消息或响应成功消息的自定义组件。它们只有这两种"状态"，所以元素的样式只能是这两种中的一种：要成功：
background-color: green;对于错误：
background-color: red;让元素的状态只将"className"属性更改为info__success/info__error之一，并在css中键入如下样式，这是一种好的做法吗？
第一次
我知道我可以使用下面这样的列表，并将其作为一个状态，但如果我有很多CSS要更新，它就会变得非常混乱。
const [ error, setError ] = useState(true);
const style = {
background-color: error ? "red" : "green",
}
return (
<div style={style}>Message</div>
)有没有更好的方法来做到这一点，在代码中不混乱和实际使用。我真的不喜欢写css在我的. jsx文件，我不喜欢tailwind那么多。
1条答案
按热度按时间c9qzyr3d1#
你的第二个选择无疑是两者中更好的一个。但是还有第三个选择，它更适合我在生产代码中看到的模式，我认为它会更令你满意。使用state来跟踪是否有错误，如你的第二个例子所示。然后使用error state来确定类，如你的第一个例子所示。
我的理解是，如果你不使用像TailwindCSS这样的实用框架，直接操作样式就可以了。除非它变得复杂（不止几个属性），否则我不一定会有问题。但我会反对直接在state中存储类字符串。
类名是您 * 实际 * 跟踪的内容的副作用：而且，通过直接跟踪错误状态，您可以很容易地使用 * 其他 * 副作用，出于可访问性的原因，您应该这样做（颜色的改变对看不到颜色的人来说没有任何改变）。这可能包括呈现默认隐藏的错误消息和/或管理焦点。