Javascript 反应道具传递颜色

我有许多大小相同但颜色不同的

div

元素。因此，我创建了一个组件“Colors.jsx”，其中包含以下代码

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

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

export default Colors;

从“React”导入React；
导入“/styles.css”；
功能颜色（道具）{
返回(
);
}
导出默认颜色；

问题是我遇到了以下错误：

/src/Colors.jsx:意外标记，应为“，”（6:59）
4 |功能颜色（道具）{
5 |返回（
6 |
^7 |）；
8 |}
九,|

4 |功能颜色（道具）{
5 |返回（
6 |
^7 |）；
8 |}
九,|

分析错误：意外标记，应为“，”
4 |功能颜色（道具）{
5 |返回（
6 |
^7 |）；
8 |}
9 |（空）

问题在于：

<div className="colors" style={{backgroundColor: {props.color}}}></div>

您需要这样做（删除额外的currly大括号）：

---

像这样移除

道具周围的括号。添加
子项
以清楚地使用组件

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

功能颜色（道具）{
返回(
{props.children}
);
}

那就这样说吧

<Colors color="#765739">Hello</Colors>

你好

style={{backgroundColor:props.color}}

{{backgroundColor:{props.color}}}

-->

{{backgroundColor:props.color}

<Colors color="#765739">Hello</Colors>