如何在react中从父级调用子组件函数
单击按钮需要从 parentComponent 调用子函数 needToBeCalled()
请参考下面的片段
class Parent {
render(){
return(
<button onClick={() => }>Click</button>
<Child />
)
}
}
class Child {
function needToBeCalled() {
}
render(){
return (
)
}
}
如何在react中从父级调用子组件函数
IT技术
reactjs
2021-05-20 06:47:35
2个回答
这是 React 中的反模式，但您可以使用 ref 来做类似的事情
class Parent {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render(){
return(
<button onClick={this.myRef.current}>Click</button>
<Child myRef={this.myRef}/>
)
}
}
class Child {
componentDidMount(){
function needToBeCalled() {
}
this.props.myRef.current = needToBeCalled
}
render(){
return (
)
}
}
你不能，但有一个替代方案来成功你想做的事。
另一种方法是在 Child 组件中使用一个名为 componentDidUpdate() 的react生命周期并获取已更改的props。
例如
class Parent extends React.PureComponent {
state={
trigger:false
}
render(){
return(
<button onClick={() => {this.setState(prevState=>({trigger:!prevState.trigger}))}}>Click</button>
<Child trigger={this.state.trigger} />
)
}
}
class Child extends React.PureComponent {
componentDidUpdate(prevProps, prevState) {
if (this.props.trigger && prevProps.trigger !== this.props.trigger) { // <---- When the props trigger turns true, we are good to go
this.needToBeCalled() // <---- You do trigger your function right now kid
}
}
function needToBeCalled() {
}
render(){
return (
)
}
}
其它你可能感兴趣的问题