0
votes

Ajout de la composante enfant sur ONCLICK de composant parent à nouveau et à nouveau avec un nouvel accessoire à chaque fois pour enfants Comp

Je suis nouveau pour réagir, alors portez des mots non techniques. J'ai un composant parent qui a un élément de bouton sur Onclick of Button une fonction est appelé qui crée un nouvel objet. Ce que je veux, c'est aussi se produire lorsque l'utilisateur clique sur ce bouton Le composant enfant doit être Renderd en dessous de l'élément de bouton parent et chaque fois que chaque bouton est cliqué sur un nouveau objet doit être transmis comme un composant enfant afin qu'il puisse l'afficher à l'écran, mais précédemment appelé enfant devrait rester à l'écran.

Importer réagit de "réagir"; xxx

parentcomponant s'étend réagit.purecomonent { xxx < p>}

reactjs

0 commentaires

4 Réponses :

1
votes

Voici un tour Faites un état pour les enfants xxx

puis en boucle pour rendant xxx

et ajouter des enfants xxx

0 commentaires

1
votes

En réagissant, vous devrez penser d'une manière, à savoir que votre JSX (HTML + JS) est déjà prêt à afficher le composant enfant et n'attend que l'état d'affichage. Tout d'abord, vous aurez besoin de l'état de composant parent avec un objet vide STATE = {ENFANT: {}) CODE>

Ensuite, dans votre méthode de rendu P> xxx pré>

alors votre méthode Ajouter P>

addChild = () => this.setState({ child: {name: 'Hi', surname: 'Hello'} })

0 commentaires

1
votes

Créez un tableau dans le composant parent et stockez la valeur de l'état du composant parent, Passez ce tableau en tant que accessoires à la composante enfant Boucle à travers la matrice dans le composant enfant pour faire autant que la composante de la liste

composante enfant xxx

0 commentaires

1
votes

ci-dessous est le code de travail de votre question et Codesandbox Link : -

APP.JSX P>

import React from "react";

class childcomponent extends React.PureComponent {
  state = { data: this.props.data };
  render() {
    return (
      <div key={this.state.data.key}>
        <span>Name: {this.state.data.name}</span>
        <br />
        <span>Lastname: {this.state.data.lastname}</span>
      </div>
    );
  }
}

export default childcomponent;

0 commentaires