傳遞顏色的反應道具

Question

我有許多大小相同但顏色不同的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;

問題是我收到這些錯誤：

/src/Colors.jsx：意外標記，應為“，”（6:59）
4 | 功能顏色（道具）{
5 | 返回 （
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

4 | 功能顏色（道具）{
5 | 返回 （
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

解析錯誤：意外的標記，預期的“，”
4 | 功能顏色（道具）{
5 | 返回 （
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 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>