传递颜色的 React 道具

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>

Answer 2

像这样去掉props.color两边的括号。添加 children 以清楚地使用您的组件

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

那就这样称呼吧

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

传递颜色的 React 道具

React props for passing color

javascript

css

reactjs

react-props