将回调函数作为道具传递给子组件很简单,反之亦然。
我们如何调用子组件的实例方法?
在<Parent />
组件中,我需要调用this.bar
组件的<Child />
实例方法。
class Parent extends React.Component {
render() {
return (
<Child />
)
}
}
class Child extends React.Component {
constructor( props ) {
super( props );
this.bar = () => console.log('foo');
}
}
答案 0 :(得分:2)
您可以使用refs
来做到这一点。
class Parent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
componentDidMount() {
this.childRef.current.bar()
}
render() {
return (
<Child ref={this.childRef} />
);
}
}
class Child extends React.Component {
constructor( props ) {
super( props );
this.bar = () => console.log('foo');
}
render() {
return <p>Child</p>
}
}