Comment passer un tableau d'un composant enfant au composant parent à l'aide de crochets dans React

2020-08-01 reactjs

Je travaille sur un projet React J'essaie de transmettre des données du composant enfant au composant parent, mais je ne sais pas comment transmettre les données du composant enfant au composant parent.

C'est App.js

import React from 'react';
import './App.css';
import Parent from './Parent/Parent';


function App() {
  return (
    <div className="container">
      <div className='row'>
        <div className='col-12'>
          <Parent></Parent>
        </div>
      </div>
    </div>
  );
}

export default App;

C'est Parent.js

import React, { useState } from 'react';
import './Parent.css';
import Child from '../Child/Child';


const Parent = () => {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='one'>
                        <Child></Child>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Parent

C'est Child.js

import React from 'react';
import './Child.css';

const Child = () => {
    const students = ['Jasmine', 'Stella']
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                </div>
            </div>
        </div>
    )
}

export default Child

Answers

Vous pouvez transmettre les données d'enfant à parent en appelant une fonction transmise par Parent avec les données que vous souhaitez envoyer en tant que paramètre - comme un rappel de gestionnaire d'événements.

Disons que si vous souhaitez envoyer les students de votre composant Enfant à Parent lorsque vous cliquez sur un élément:

const Parent = () => {
    const onUpdate = (data) => {
         // use the data
    };

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='one'>
                        <Child update={onUpdate}></Child>
                    </div>
                </div>
            </div>
        </div>
    )
}
const Child = ({ update }) => {
    const students = ['Jasmine', 'Stella']

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                     <button click={() => update(students)} />
                </div>
            </div>
        </div>
    )
}

Mais si vous devez transmettre des données entre des composants imbriqués profondément, vous devez envisager d'utiliser Redux ou Context .

Pour ce faire, vous disposez de deux méthodes simples,

  1. Utiliser le contexte React
  2. Utiliser le rappel de prop React

Je vous suggère d'utiliser la première méthode et voici un exemple d'implémentation de la fonctionnalité de contexte redux dans votre application en fonction des codes de votre question.

Démo

Related