javascript - 传递颜色的 React Prop

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: Unexpected token, expected "," (6:59)
4 | function Colors(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

4 | function Colors(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

Parsing error: Unexpected token, expected ","
4 | function Colors(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 | (null)

Answer 1

问题在这里:

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

你需要这样做(去掉多余的大括号):

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