通过颜色的反应道具

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函数颜色（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>

相关问题

• 更改圆形按钮android的背景颜色
• 自定义Snackbar操作按钮颜色的问题
• Xamarin.Android更改单一编辑文本下划线颜色
• 已解析的颜色而不是资源id
• 如何更改导航栏中的文本颜色？[重复]
• 不同字体大小和颜色的UILabel文本[重复]
• 通过.css文件更改 JavaFX 中的字体颜色
• 通过 AJAX jquery 更改表背景颜色？（问）
• 如果值>=1000，如何更改表格行的背景颜色？
• 如何使用Javascript操作行和表格的背景颜色
• 如何在表格中添加新行并更改其颜色？
• 通过AJAX jquery改变表格背景颜色？
• 单击特定表格行更改背景颜色
• 为什么我的背景在点击时会改变为十六进制颜色？
• 具有自定义颜色属性的TextView不会在布局预览中呈现
• 更改JLabel中某些文本的颜色
• 为JLabel中的字体颜色分配一个变量
• 是否可以在JList中的一个JLabel上使用不同的字体颜色？
• JavaFX遍历TableView单元格（按行）并设置背景颜色
• 不是由我创建的Android默认警报对话框背景颜色

热门标签

---

Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS

Answer 1

热门标签

Answer 2

相关问题

Answer 3

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

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

那就这样叫吧

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

Answer 4

问题就在这里：

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

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

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