0
votes

Transfert de données entre les éléments réactifs

Essayer de déterminer comment transférer des données entre les composants de frères et sœurs. L'idée est la suivante: vous devez vous assurer qu'un seul composant enfant a une classe "active" (un seul div pourrait être sélectionné). Voici le code: https://codepen.io/slava4ka/pen/rnbojgp xxx

J'ai essayé de mettre en œuvre cela à travers des crochets, pas des cours. En conséquence, lorsque vous cliquez sur le composant sélectionné, ses classes changent et rien ne se passe sur ses frères et sœurs. Si je comprends bien, ils ne sont tout simplement pas redessinés. La question est de savoir comment le réparer? Et une telle approche est-elle correcte pour la réalisation d'un objectif donné? Ou mon idée est fondamentalement fausse, je vous serai reconnaissant pour les conseils))

javascript reactjs

0 commentaires

3 Réponses :

1
votes

Vous devez transmettre une fonction dans l'enfant du parent qui gère l'évolution de l'état dans la composante parent d'un élément d'état qui détermine l'ID "actif", permet d'appeler que ActiveID. Puis passez activé dans l'enfant comme un accessoire. Dans l'enfant, comparez l'ID à l'actif et appliquez la classe en conséquence.

1 commentaires

@ Слава иванов. Ceci est illustré dans Etat de levage Up

0
votes

Correct, c'est la mauvaise façon d'y penser. Si vous voulez seulement qu'un enfant soit sélectionné à la fois, vous devez garder le "quel enfant est sélectionné" des données dans le parent. Chaque enfant ne devrait pas également gérer sa propre version de son état mis en évidence; Au lieu de cela, il devrait s'agir d'un accessoire donné à chaque enfant (chaque enfant est une fonction pure.) Essayez ceci:

const ChildComponent = props => {
  return (
    <div
      className={'childComponent' + (props.isActive ? ' active' : '')}
      onClick={() => props.setHighlighted(props.id)}
    >
      <h3>{props.name}</h3>
    </div>
  );
};

const ParentComponent = props => {
  const state = [
    { id: 0, name: 'Ð¾Ð´Ð¸Ð½' },
    { id: 1, name: 'Ð´Ð²Ð°' },
    { id: 2, name: 'Ñ‚Ñ€Ð¸' }
  ];

  const [clicked, setClicked] = React.useState(null);

  return (
    <div>
      {state.map(entity => (
        <ChildComponent
          setHighlighted={setClicked}
          key={entity.id}
          id={entity.id}
          name={entity.name}
          isActive={entity.id === clicked ? 'active' : null}
        />
      ))}
    </div>
  );
};

ReactDOM.render(<ParentComponent />, document.getElementById('root'));

0 commentaires

1
votes

Vous ne pouvez pas utiliser la méthode OnClick de l'enfant pour définir le style comme lorsqu'un enfant est cliqué, les autres enfants ne savent pas que: ((((

au lieu de cela, lorsque vous cliquez sur un enfant, il indique au parent. cliqué (vous le faites correctement déjà avec SetClicked ()), puis le parent peut indiquer à chaque enfant s'ils sont actifs ou non (en passant isactif booléen), et chaque enfant utilise son projectif booléen à définir son style: D xxx

0 commentaires