2
votes

Comment passer des données d'un composant à un autre ReactJS

J'ai deux composants. Le premier a l'état initialisé:

import React from 'react';

class Two extends React.Component {

    render() {
        return (
            <div>{this.prop}</div>     
        );
    }
}

export default Two;

import React from 'react';

class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

            <div prop={this.state.data}>{this.state.data}</div>  
        );
    }
}

export default One;

Le premier composant imprime l'état des données. Comment passer cette valeur dans mon deuxième composant en tant que valeur en lecture seule et la rendre?

reactjs

0 commentaires

4 Réponses :

1
votes

Vous devez appeler ce composant 'Two' en 'One' comme ceci

One Component:

import Two from './path/to/component';

Vous pouvez l'appeler comme vous le souhaitez (myProp)

Et lisez ceci dans le composant 'Two':

render() {
  return (
     <div>Received data from parent Component: {this.props.myProp}</div>
  )
}

Avant d'appeler le composant 'Two' dans 'One', vous devez importer ce fichier

render() {
  return (
     <Two myProp={this.state.data} />
  )
}

1 commentaires

Vous pouvez rechercher des cours sur le Web, par exemple site udemy, car cette question concerne les bases de react et vous pouvez l'apprendre facilement :)

4
votes

Pour passer la valeur dans le deuxième composant, vous devez d'abord l'importer dans votre premier composant et passer la valeur comme accessoire.

Par exemple, votre code pourrait ressembler à ceci:

hi
hi

Et puis dans le Two.js vous pouvez accéder à la valeur comme ci-dessous:

import React from 'react';

class Two extends React.Component {

    render() {
        return (
            <div>{this.props.value}</div>     
        );
    }
}

export default Two;

Maintenant, disons, vous utilisez votre composant One dans App ou n'importe où. Chaque fois que vous utiliserez , vous obtiendrez les informations suivantes dans le navigateur:

import React from 'react';
import Two from './Two' // I am assuming One.js and Two.js are in same folder.

class One extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: 'hi'
        }
    }

    render() {
        return (

            <div>
               <div>{this.state.data}</div>
               <Two value={this.state.data} />
            </div>
        );
    }
}

export default One;

1 commentaires

this.prop ?? Vous êtes sûr? ;)

0
votes

Il suffit d'ajouter le code suivant dans la méthode de rendu One component et de transmettre les données en tant qu'accessoires en lecture seule

import React from 'react';

class Two extends React.Component {
constructor(props){
super(props)
}

    render() {
        return (
            <div>{this.props.data}</div>     
        );
    }
}

export default Two;

Ensuite, dans le composant Two pour accéder aux données, ajoutez le code suivant

XXX

Les accessoires contiendront l'objet transféré depuis l'élément parent

0 commentaires

0
votes

XXX

DeuxJs

import React from 'react';

class Two extends React.Component {

    render() {
        return (
            <div>Component Two data: {this.props.dto.data}</div>     
        );
    }
}

export default Two;

0 commentaires