如何在反应中将数据从无状态子组件发送到无状态父组件？答案

【问题标题】：How to send data from stateless child component to stateless parent component in react?如何在反应中将数据从无状态子组件发送到无状态父组件？
【发布时间】：2019-08-22 08:45:08
【问题描述】：

我是新来的反应。我有一个带有几个类组件和无类组件的反应应用程序。我有以下两个组件，需要将数据（在本例中为“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>
    ));
  }
}

我该怎么做？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

如果我理解您的问题，您可以通过在ProjectList 渲染方法中将回调属性传递给<project> 来访问从ProjectList 组件传递给sendId() 的id，如下所示：

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>
    ));
  }
}

然后，此更改将要求您更新 project 组件，以便在调用 onClick 处理程序时调用回调属性：

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

希望有帮助！

【讨论】：

你有无国籍孩子到有状态父母的例子吗？
嘿@Jesse - 你的意思是像一个维护状态以呈现任何（无状态）项目子组件的 ProjectList 父组件吗？

【解决方案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>
    ));
  }
}

【讨论】：

【解决方案3】：

只需将父组件的方法传给子组件，并使用props.xxx()。

https://jsfiddle.net/bugqsfwj/

【讨论】：

【解决方案4】：

您所要做的就是将一个函数传递给接受 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>
)

反应愉快:)

【讨论】：

不应该在子组件中说 this.props.getDataFn 吗？