最新答案(React-hooks获取函数式子组件内容):
// 子组件
import React, {useImperativeHandle} from 'react';
const FunctionComponent = React.forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
click: handleClick,
ref: ref.current,
}));
const handleClick =() => {
console.log('hulala')
};
return (
<div onClick={handleClick} ref={ref} style={{width: '100px'}}>
hulala
</div>
);
});
export default FunctionComponent;
// 父组件
const App = () => {
const Dd = useRef();
useEffect(() => {
console.log(Dd, 'Dd');
}, []);
return (
<FunctionComponent ref={Dd}/>
)
};
以下为很久以前的原答案,虽然好理解,但是不方便也不利于代码维护,不推荐下面的方法,还是用Ref吧.
先上代码:
<OperateStudentForm
onGetFunc={func => {
this.handleOpenModal = func;
}}
onSearch={this.handleSearch}
/>
</Card>
);
}
}
export default StudentManagement;
componentDidMount() {
this.props.onGetFunc(this.handleOpenModal);
}
handleOpenModal = data => {
this.setState({
visible: true,
data,
});
};
- 在子组件初始化的时候,将方法名传递给父父组件,父组件通过接受子组件传递过来的func,绑定到父组件的this上,这样就能随意调用子组件的方法了.
- 注意,调用this.handleOpenModal尽量不要写在元素内联里面,最好用一个方法包一层,不然可能会出现调用不到这个函数的情况.
- 不太喜欢网上的各种ref的方式调用,会使代码结构混乱,而且非常不React.
- react-hooks时代应该不是这样玩的,应该会更优雅,还还没怎么研究
I believe your apartment is on fire
