Discussion :

[Huyenlong]

Bonjour

Je suis en train de suivre un cours de open classRoom et je bute sur un code :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
const Card = ({ card, feedback }) => (
  <div className={`card ${feedback}`}>
    <span className="symbol">
      {feedback === 'hidden' ? HIDDEN_SYMBOL : card}
    </span>
  </div>
)

line 3, pourquoi la className a comme variable card puis la variable feedback ? Sachant que le feedback est dynamique, je ne comprends pas le principe.

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

const GuessCount = ({ guesses }) => <div className="guesses">{guesses}</div>

Celle là je l'ai compris.

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import Card from './Card'
import GuessCount from './GuessCount'
class App extends React.Component {
  render() {
    return (
      <div className="memory">
        <GuessCount guesses={0} />
        <Card card="😀" feedback="hidden" />
        <Card card="🎉" feedback="justMatched" />
        <Card card="💖" feedback="justMismatched" />
        <Card card="🎩" feedback="visible" />
        <Card card="🐶" feedback="hidden" />
        <Card card="🐱" feedback="justMatched" />
      </div>
    )
  }
}

et celle là aussi, c 'était juste pour vous montrer la suite du code dans le app

Merci pour l'aide

[gwyohm]

Salut,

quand tu utilises les quotes inversées, cela signifie que tu peux paramétrer la string:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
const name = 'Toto';
const hello = `Hello ${name}`;
console.log(hello); // Hello Toto

Dans ton cas, la valeur de feedback est ajoutée dans les classes de card.

[NoSmoking]

Bonjour,
en gros ta ligne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<Card card="🎉" feedback="justMatched" />

sera insérée dans le document comme :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div className="card justMatched">
  <span className="symbol">🎉</span>
</div>

c'est de la récupération d'attribut, et l'écriture se fait via les Template literals.

[Huyenlong]

Merci @NoSmoking et @gwyohm, j'ai bien compris

De ce fait, il y aura des noms de className différente et on pourra manipuler la div que l'on souhaiter.


ça semble logique quand on comprends mieux

Encore merci