反应道具传递颜色

Question

我有许多大小相同但颜色不同的callq元素。所以我创建了一个组件'Colors.jsx'，其中包含以下代码

div

问题是我遇到了这些错误：

/src/Colors.jsx：意外的令牌，预期为“，”（6:59）
4 |函数颜色（道具）{
5 |返回（
6 |

^ 7 | ）;
8 | }
9 |

4 |函数颜色（道具）{
5 |返回（
6 |

^ 7 | ）;
8 | }
9 |

分析错误：意外的令牌，预期为“，”
4 |函数颜色（道具）{
5 |返回（
6 |

^ 7 | ）;
8 | }
9 | （空）

Answer 1

问题在这里：

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

您需要这样做（删除多余的括号）：

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

Answer 2

这样移除props.color周围的括号。添加children以清楚地使用您的组件

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

然后这样称呼

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