javascript - 如何将样式更改为一定的值？ react

如果{product}将包含值“空”，那么如何更改字段样式，例如使其变为红色？

const Active_task_prop = ({ value, label, prop_name, change_task_prop, title = "" }) => (
  <div className="w3-rest">
    <input
      className={"w3-input w3-border w3-round "}
      type="text"
      title={title}
      value={value}
    />
  </div>
);
// ...
<div className="App">
  <Active_task_prop value={product} prop_name="product" label="Application" />
</div>;

最佳答案

通常使用三元表达式：

className={"w3-input w3-border w3-round " + (value === "empty" ? "my-red-class" : "")}

或者如果您出于某种原因希望将其用作嵌入式样式，

style={{color: (value === "empty" ? "red" : "")}}

。

但是，当您的className语句变得更复杂时，我建议您研究classnames (or cx, as it usually is used)模块：

className={cx({
  "w3-input": true,
  "w3-border": true,
  "w3-round": true,
  "my-red-class": value === "empty",
})}

关于javascript - 如何将样式更改为一定的值？ react ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58812523/