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

【问题标题】：Can I add optional attributes to an element in React?我可以向 React 中的元素添加可选属性吗？
【发布时间】：2020-09-21 03:47:13
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

您应该使用 className 有条件地添加样式类。您可以使用 classnames 包作为回答question

【讨论】：

【解决方案2】：

您可以在 render 方法中将样式定义为对象，然后使用 ternary 和 spread 运算符将其作为 prop 分配给组件。

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

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

【讨论】：

【解决方案3】：

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

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

<input style={inputStyle}/>

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

【讨论】：

【解决方案4】：

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

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

【讨论】：