我的 React 应用包含三个组件。其中两个是子组件,另一个是父组件。我需要通过父组件将一个子组件的数据(projectId)传递给另一个子组件,并在收到数据后触发一个函数。作为我的示例,我将 projectId 从 ChildOne 发送到 Parent,然后将 projectId 从 Parent 发送到 ChildTwo。 ChildTwo 有一个名为 setProject(projectId) 的函数,我需要在收到 projectID 后触发它。 问题是我无法通过单击 ChildOne 中的按钮在 ChildTwo 中触发函数 getProjectId。我还尝试了对我不起作用的 componentDidMount 和 componentWillReceiveProps。我该怎么做?
这是我尝试过的
child 一号:
class ChildOne extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: 3,
};
}
sendProjectId = (projectId) => {
this.props.sendId(projectId)
}
render() {
return(
<button onClick={() => this.sendProjectId(this.state.projectId)}>
Click
</button>
)
}
}
家长:
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
};
}
getId = (proId) => {
this.setState({
projectId : proId
})
}
render() {
return(
<div>
<CildOne sendId={this.getId} />
<CildTwo sendOneId={this.state.projectId} />
</div>
)
}
}
child 二:
class ChildTwo extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
};
}
getProjectId = (this.props.sendOneId) => {
//Do something with this.props.sendOneId
}
render() {
return(
<div></div>
)
}
}
最佳答案
这取决于 ChildTwo
想要用上述数据完成什么。
案例 1:
ChildTwo
打算用相应的 projectId
获取一些数据并显示在组件中。然后,您可以轻松地在父组件中获取这些数据,并将数据作为 props
传递下去。
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
dataForChildTwo: null,
};
}
getId = (proId) => {
this.setState({
projectId : proId,
dataForChildTwo: fetchData(proId)
})
}
render() {
return(
<div>
<CildOne sendId={this.getId} />
<CildTwo data={this.state.dataForChildTwo} />
</div>
)
}
}
案例 2:
ChildTwo
打算在 projectId
更改时对其内部的内容进行一些更改。然后你可以使用componentDidUpdate
Hook 以查看 prop 是否更改并响应它。
class ChildTwo extends React.Component {
constructor(props) {
super(props);
this.state = {
projectId: '',
};
}
getProjectId = (this.props.sendOneId) => {
//Do something with this.props.sendOneId
}
componentDidUpdate(prevProps) {
if(this.props.projectId!==prevProps.projectId) {
// do something
}
}
render() {
return(
<div></div>
)
}
}
案例 3:
如果以上情况都不适合您,那么您可以在 projectId
更改时使用 key
属性手动重新加载完整组件:
<CildTwo key={this.state.projectId} sendOneId={this.state.projectId} />
注意:这会不必要地重新加载整个组件。
关于javascript - 如何在 react 中从 parent 那里激发 child 的功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56137035/