React组件传递颜色Props遇Unexpected token语法错误求助

嘿，这个错误一看就知道是style属性的语法写错啦！你在给backgroundColor赋值的时候多套了一层不必要的大括号，导致JavaScript解析器识别不了。

错误原因拆解 #

React的style属性要求传入一个JavaScript对象，所以外层的{{}}是把JS对象嵌入JSX的语法（外层{}表示这是JS表达式，内层{}是对象本身）。但你在backgroundColor的值里又写了{props.color}，这相当于在对象值里嵌套了另一个对象，完全不符合语法规则，自然就抛出了“Unexpected token”的错误。

修正后的代码 #

import React from "react";
import "./styles.css";

function Colors(props) {
  return (
    <div className="colors" style={{ backgroundColor: props.color }}></div>
  );
}

export default Colors;

额外小优化（可选） #

如果你觉得props.color写起来有点啰嗦，可以用解构赋值简化组件的参数：

import React from "react";
import "./styles.css";

// 直接解构出color属性
function Colors({ color }) {
  return (
    <div className="colors" style={{ backgroundColor: color }}></div>
  );
}

export default Colors;

这样写不仅更简洁，代码可读性也更高哦～

内容的提问来源于stack exchange，提问作者Web Dev