Accessoires React pour passer la couleur

Question

J'ai de nombreux divéléments de même taille mais avec des couleurs différentes. J'ai donc créé un composant 'Colors.jsx' dans lequel j'ai le code ci-dessous

import React from "react";
import "./styles.css";

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

export default Colors;

Le problème est que j'obtiens ces erreurs:

/src/Colors.jsx: jeton inattendu, attendu "," (6:59)
4 | function Couleurs (accessoires) {
5 | return (
6 | <div className = "colors" style = {{backgroundColor: {props.color}}}>
^ 7 |);
8 | }
9 |

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

Erreur d'analyse: jeton inattendu, attendu ","
4 | function Couleurs (accessoires) {
5 | return (
6 | <div className = "colors" style = {{backgroundColor: {props.color}}}>
^ 7 |);
8 | }
9 | (nul)

Answer 1

Le problème est ici:

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

Vous devez faire comme ceci (supprimez les accolades supplémentaires):

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

Answer 2

Retirez les crochets props.colorcomme ceci. Ajoutez le childrenpour utiliser clairement votre composant

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

Alors appelle ça comme ça

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