如何在無響應的情況下將數據從無狀態子組件發送到無狀態父組件？

Question

我是新來的。 我有一個帶有幾個類組件和無類組件的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>
    ));
  }
}

我怎樣才能做到這一點？

Answer 1

如果我理解您的問題，可以通過將回調道具傳遞給ProjectList渲染方法中的<project>來從ProjectList組件訪問傳遞給sendId()的id ， sendId() ：

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處理程序時調用回調prop：

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

希望有幫助！

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

Answer 3

只需將父級的方法提供給子組件，然后使用props.xxx() 。

https://jsfiddle.net/bugqsfwj/

Answer 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>
)

快樂的反應:)