3
votes

Comment envoyer des données d'un composant enfant sans état au composant parent sans état dans React?

Je suis nouveau pour réagir. J'ai une application de réaction avec plusieurs composants de classe et des composants sans classe. J'ai deux composants suivants et je dois envoyer une donnée ("projectID" dans ce cas) du composant enfant au composant parent. Mon composant enfant est un composant sans classe. Je sais que je peux faire cela dans les composants de classe comme suit

import project from './project'

class ProjectList extends React.Component {

  render() {
    return (
      <div>
        {() => (
          <project 
              // How to setup "get id from child" here? 
          />
        )}
      </div>
    ));
  }
}

Mais j'ai un composant enfant sans classe

Composant enfant:

const sendId = (id) => {
  // How to setup "send id to parent" here?
}

const project = ({ task }) => (
  <div onClick={() => sendId(task.projectID)} >
    {task.projectID}
  </div>
)

export default project

javascript reactjs

0 commentaires

4 Réponses :

5
votes

Si je comprends votre question, vous pouvez accéder à l ' id transmis à sendId () à partir du composant ProjectList en passant un accessoire de rappel à dans la méthode de rendu ProjectList comme ceci:

const project = ({ task, onSendId }) => (
  {/* Pass the onSendId callback into project, and call this from onClick */}
  <div onClick={() => onSendId(task.projectID)} >
    {task.projectID}
  </div>
)

Ce changement nécessiterait alors que vous mettiez à jour le projet afin que la prop de rappel soit appelée lorsque le gestionnaire onClick est appelé:

class ProjectList extends React.Component {

  render() {
    return (
      <div>
          {/* pass onSendId callback prop, and console log when it's invoked */}
          <project onSendId={ (theId) => { console.log(`sent id: ${theId}`); } } />
      </div>
    ));
  }
}

J'espère que cela aide!

0 commentaires

2
votes

Donnez simplement la méthode du parent au composant enfant et utilisez props.xxx () .

https://jsfiddle.net/bugqsfwj/

0 commentaires

3
votes

Vous pouvez transmettre un rappel que vous définissez dans votre composant parent à vos

accessoires de composant enfant.

composant enfant:

import project from './project'

class ProjectList extends React.Component {

  sendIdHandler = (projectId) => {
    //put your logic here
  }

  render() {
    return (
      <div>
          <project sendId={this.sendIdHandler} />
      </div>
    ));
  }
}

parent composant:

const project = ({ task, sendId }) => (
  <div onClick={() => sendId(task.projectID)} >
    {task.projectID}
  </div>
)

export default project

0 commentaires

1
votes

Tout ce que vous avez à faire est de transmettre une fonction au composant enfant qui accepte l'ID.

Composant parent

const project = ({ task }) => (
  <div onClick={this.props.getDataFn(task.projectID)} >
    {task.projectID}
  </div>
)

Enfant Composant

class ProjectList extends React.Component {
  getChildData = (id) => {/* do something */ }

  render() {
    return (
      <div><Project getDataFn={this.getChildData}</div>
    ));
  }
}

Bonne réaction :)

1 commentaires

Vous ne devriez pas dire this.props.getDataFn dans le composant enfant?