我可以向 React 中的元素添加可选属性吗？

Question

目前，在我的 React 应用程序中，我有这个，

<input style={{ borderColor: valid ? null : "red", boxShadow: valid ? null : "rgb(2, 0, 0)"}} />

如果我有更多样式要做，那么一次又一次地检查相同的条件是没有意义的，对吧？ 我希望将整个样式属性设为可选； 像这样的东西，

<input valid ? null : style={{ borderColor: "red", boxShadow: "rgb(2, 0, 0)"}} />

但我知道这不是正确的语法。 难道没有更好的方法来做到这一点吗？

Answer 1

您应该使用 className 有条件地添加样式类。您可以使用类名 package 作为对问题的回答

Answer 2

一种选择是创建一个变量：

const inputStyle = !valid ? {
  borderColor: "red",
  boxShadow: "rgb(2, 0, 0)"
} : {};

<input style={inputStyle}/>

它与您当前拥有的相同，但您可以根据需要将新属性添加到变量中，而不会增加input标签中的比较量。

Answer 3

您可以在 render 方法中将 styles 定义为 object，然后使用三元和展开运算符将其作为组件可选地分配给组件。

const styles = {
    borderColor: "red",
    boxShadow: "rgb(2, 0, 0)",
    // etc...
};

return (
    <input { ...(valid ? { styles } : {}) } />
);

Answer 4

您需要将逻辑放入样式属性中，并在有效的情况下为其传递一个中性元素（或将其提取到变量中）。 我认为这应该可以解决问题：

<input style={valid ? {} : { borderColor: "red", boxShadow: "rgb(2, 0, 0)"}} />