Ok, disons que j'ai un composant comme:
Qui est formé de 2 composants différents:
1) Le rectangle entier (appelons-le card )
2) Chaque côté (le carré) est un autre composant (appelons-le cardSide )
J'ai ajouté un bouton sur card qui, lorsqu'on clique dessus, rassemble toutes les informations sur chacun des composants cardSide (texte, note, image, etc.).
Mes questions sont les suivantes: comment puis-je y parvenir?
J'ai lu sur la transmission des références du parent aux enfants et l'envoi des accessoires du parent aux enfants , mais je n'ai trouvé aucun exemple du contraire obtenant les accessoires / états des composants enfants .
Je n'ai pas beaucoup d'expérience sur React et j'utilise des hooks et des fonctions au lieu de classes (au cas où cela compte) en Java c'est très facile de le faire en accédant au get méthodes de chaque instance , comment faire dans React?.
3 Réponses :
voir cette URL: Appeler la méthode enfant du parent . et lisez les réponses de rossipedia.
Il semble que la section " Utilisation des composants de classe (> = react@16.4) " vous sera plus utile.
Eh bien, tout d'abord, merci pour la réponse rapide. Le problème ici est que j'utilise des hooks et des fonctions, je n'utilise plus de classes, donc je ne peux pas utiliser this. referente; Deuxièmement, l'exemple que vous avez mentionné est lié à l'invocation d'une fonction dans l'enfant du parent en utilisant des refs, ce n'est pas ce que je veux réaliser, je veux accéder aux accessoires ou aux états des enfants du parent
ok, alors vous devriez lire la section "Utilisation des crochets et des composants de fonction (> = react@16.8)" . et pour accéder aux props enfants et aux états, écrivez les méthodes get dans le composant enfant, puis appelez ces méthodes get du parent.
Je l'ai lu, comme je l'ai mentionné, ce n'est pas ce que je recherche. Ces `` méthodes get '' devraient être spécifiées à l'intérieur des fonctions, mais une seule d'entre elles (la principale) est celle considérée comme exportée, donc la seule visible
Vous devrez créer une fonction / méthode dans le conteneur parent qui définit l'état. De là, vous pouvez le transmettre au composant enfant qui pourra définir l'état de son parent.
Afin de réaliser cette communication, je suggère que l'enfant ( Composant CardSide ) communique avec le Composant Carte via Événements .
donc lorsque l'utilisateur a terminé son opération sur le composant carte, un événement est déclenché en passant toutes les données au parent, laissez-moi vous montrer un exemple de ce que je veux dire:
Composant carte
class CardSide extends Component {
render() {
return (
<div>
{/* data here reprensets what you need to transfer to parent component */}
<button onClick={() => this.props.onCompelete(data)} >
Hello btn
</button>
</div>
);
}
}
Composant CardSide
class Card extends Component {
handleCompelete = data => {
//the data here are all the data entered from the child component
//do some sorting using table name
};
render() {
return <div>
{this.props.children}
{console.log(this.props.children)}
{this.props.children.props.someProp}
</div>;
}
}
Modifier
Vous ne pouvez pas accéder à l'état du composant enfant car il lui est privé.
En ce qui concerne les accessoires, vous pouvez y accéder mais il est en lecture seule qui est passé du composant parent mais le composant enfant ne peut pas le modifier.
En fait, il existe un moyen d'accéder aux enfants du composant (mais je vois que cela compliquera votre code plutôt que de le simplifier et je ne le recommande pas)
disons que c'est vous app.js
class App extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
render() {
return (
<div>
<h1>Title</h1>
<Card>
<CardSide someProp="My Child Prop Value" />
</Card>
</div>
);
}
}
comme vous pouvez le voir, j'ai inclus CardSide avec la propriété avec le nom someProp en tant qu'enfant pour Card rathar que de l'insérer dans Card Component
Dans le composant Card, j'ai accédé à la propriété children comme suit:
class CardComponent extends Component {
render() {
return (
<div>
{/* data here reprensets what you need to transfer to parent component */}
<button onClick={() => this.props.onCompelete(data)} />
</div>
);
}
}
et le composant CardSide
class Card extends Component {
handleCompelete = data => {
//the data here are all the data entered from the child component
//do some sorting using table name
};
render() {
return <CardSide onCompelete={this.handleCompelete} />;
}
}
Comme vous pouvez voir que cela compliquera votre structure et qu'il sera difficile de savoir qui sont les enfants du composant carte sans un traçage intensif .
vous pouvez voir le code en action via ce lien https://stackblitz.com/ edit / react-fxuufw? file = CardSide.jsx
Si je fais cela, les données que vous placez dans la méthode de rendu seront rendues à l'écran, je sais que je pourrais peut-être les patcher en les cachant ou ainsi, mais cela signifie-t-il qu'il n'y a pas de moyen direct d'accéder au état / accessoires d'un enfant?
en fait, vous pouvez accéder aux accessoires de l'enfant depuis le parent mais ce sera compliqué. J'ai mis à jour la réponse pour ce faire, veuillez vérifier.
Je recommanderais d'abord un petit détour: reactjs.org/docs/thinking-in-react. html