如何在无响应的情况下将数据从无状态子组件发送到无状态父组件?

时间:2019-04-01 08:25:39

标签: javascript reactjs

我是新来的反应者。我有一个带有几个类组件和无类组件的React App。我有以下两个组件,需要从子组件向父组件发送数据(在这种情况下为“ projectID”)。我的子组件是无类组件。我知道我可以在类组件中做到这一点,如下所示

sendId(id) {
  this.setState({ projectID:id }, () =>
     this.props.onClick(this.state.projectID)
  )
}

但是我有一个无类的子组件

子组件:

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

父组件:

import project from './project'

class ProjectList extends React.Component {

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

我该怎么做?

4 个答案:

答案 0 :(得分:3)

如果我理解您的问题,则可以通过向{{1}中的id传递回调道具,来访问sendId()组件传递给ProjectList的{​​{1}} }渲染方法如下:

<project>

然后,此更改将要求您更新ProjectList组件,以便在调用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> )); } } 处理程序时调用回调prop:

project

希望有帮助!

答案 1 :(得分:2)

您可以将在父组件中定义的回调传递给孩子

道具。

子组件:

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

export default project

父组件:

import project from './project'

class ProjectList extends React.Component {

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

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

答案 2 :(得分:1)

只需将父级方法赋予子级组件,然后使用props.xxx()

https://jsfiddle.net/bugqsfwj/

答案 3 :(得分:0)

您要做的就是将一个函数传递给接受ID的子组件。

父组件

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

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

子组件

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

Happy React:)