前情:我需要在Component中获取hook中某个参数的值,而hook被Form包了一层,此时我没有办法简单地通过ref获取hook中的参数。
开发过程当中查了很久最终解决了,记录一下方便以后查阅。
本文记录Component为父组件,hook为子组件的情况。
我的习惯是一个组件放一个文件。
父组件ParentCom.jsx:
import ChildHook from './ChildHook.jsx';
export default class ParentCom extends React.Component{
constructor(){
super();
this._subRef = React.createRef();
}
_onClick=()=>{
console.log(this._subRef.status);
}
render(){
<ChildHook wrappedComponentRef={(ref)=this._subRef = ref} />
<input onClick={this._onClick} />
};
}
子组件ChildHook.jsx
const SubHook = (props)=>{
let statusRef = React.useRef(true);
// 在hook中使用ref需要fowardRef、useImperativeHandle配合。
useImperativeHandle(props.refInstance, ()=({
status: statusRef.current
}));
}
const SubHookForwardRef = fowardRef((props, ref)=>(
<SubHook {...props} refInstance={ref} />
));
export default Form.create()(SubHookForwardRef);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。