我是新来的反应者。我有一个带有几个类组件和无类组件的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>
));
}
}
我该怎么做?
答案 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()
。
答案 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:)