Javascript 如何在react中将数据从无状态子组件发送到无状态父组件？

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

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

export default project

const sendId=（id）=>{
//如何在此处设置“向家长发送id”？
}
const项目=（{task}）=>(
sendId（task.projectID）}>
{task.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>
    ));
  }
}

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

export default project

从“/project”导入项目
类ProjectList扩展了React.Component{
render（）{
返回(
{() => (
)}
));
}
}

---

如何执行此操作？

如果我理解您的问题，您可以从

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

---

希望有帮助

只需将父组件的方法提供给子组件，并使用

props.xxx（）

---

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

组件道具

子组件：

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

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

export default project

const项目=（{task，sendId}）=>(
sendId（task.projectID）}>
{task.projectID}
)
导出默认项目

父组件：

import project from './project'

class ProjectList extends React.Component {

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

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

从“/project”导入项目
类ProjectList扩展了React.Component{
sendIdHandler=（projectId）=>{
//把你的逻辑放在这里
}
render（）{
返回(
));
}
}

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

父组件

类项目列表扩展了React.Component{
getChildData=（id）=>{/*做点什么*/}
render（）{
返回(
(
{task.projectID}
)

---

Happy React:）

不应该在子组件中这样说。props.getDataFn？您有无状态子组件到有状态父组件的示例吗？hey@Jesse-您的意思是像ProjectList父组件一样维护呈现任何（无状态）项目子组件的状态吗？