通过颜色的反应道具

提问者：小点点

通过颜色的反应道具

我有许多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函数颜色（props）{
5返回(
6

^7)；
8}
9

4函数颜色（props）{
5返回(
6

^7)；
8}
9

分析错误：意外标记，应为“，”
4函数颜色（props）{
5返回(
6

^7)；
8}
9（null）

共2个答案

匿名用户

问题就在这里：

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

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

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

匿名用户

删除props.color周围的括号，如下所示。添加子项以清楚地使用组件

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

那就这样叫吧

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

通过颜色的反应道具

共2个答案

相关问题

热门标签

通过颜色的反应道具

共2个答案

相关问题

热门标签

微信关注