React中props传入字符串mode时如何正确绑定预定义深浅样式对象

样式失效、编辑器提示dark/light未被使用的原因非常直接：

• 你传入的props.mode是字符串类型，仅可能为'light'或'dark'两个字符串值，原始类型字符串不存在backgroundColor、color这类属性，你写props.mode.backgroundColor得到的永远是undefined，样式自然无法生效
• 你提前定义的dark、light两个样式对象全程没有被引用，编辑器的未使用提示是准确的。

你可以保留提前定义两个独立样式对象的写法，只需要根据props.mode的字符串值，选中对应样式对象传给style属性即可，常用两种实现方式：

写法1：主题映射表（推荐，后续扩展主题更方便） #

用对象做键值映射，key对应mode的字符串值，value对应提前写好的样式对象：

// 预定义两个主题样式
const dark = {
  backgroundColor: "#2c3343",
  color: "#c8e5c9"
};
const light = {
  backgroundColor: "white",
  color: "black"
};
// 建立主题映射关系
const themeMap = {
  dark: dark,
  light: light
};

return (
  <>
    <div className="my-5 container">
      <h1>{props.heading}</h1>
      <div className="mb-3">
        <textarea
          className="form-control"
          id="myBox"
          value={text}
          rows={8}
          onChange={handleOnChange}
          // 直接根据mode取值传入对应样式对象即可
          style={themeMap[props.mode]}
        >
          asd
        </textarea>
      </div>
    </div>
  </>
);

写法2：三元运算符判断 #

如果不想额外创建映射对象，直接判断mode值返回对应样式对象即可：

const dark = {
  backgroundColor: "#2c3343",
  color: "#c8e5c9"
};
const light = {
  backgroundColor: "white",
  color: "black"
};

return (
  <>
    <div className="my-5 container">
      <h1>{props.heading}</h1>
      <div className="mb-3">
        <textarea
          className="form-control"
          id="myBox"
          value={text}
          rows={8}
          onChange={handleOnChange}
          style={props.mode === 'dark' ? dark : light}
        >
          asd
        </textarea>
      </div>
    </div>
  </>
);

• 以上两种写法都完整复用了你提前定义的dark/light样式对象，不会再触发编辑器的未使用提示
• 如果需要做异常兜底，可以给样式加默认值，比如style={themeMap[props.mode] ?? light}，避免mode传值错误时页面样式异常
• React的style属性本身就接受一个样式对象作为入参，你预定义的dark/light本身就是符合格式要求的样式对象，不需要再额外嵌套结构写属性。

内容的提问来源于stack exchange，提问作者Bittu Joshi