React Hooks中父组件中调用子组件方法
<h1><br>React Hooks中父组件中调用子组件方法</h1><p>使用到的hooks-- useImperativeHandle，useRef</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">/* child子组件 */
// https://reactjs.org/docs/hooks-reference.html#useimperativehandle
import {useState, useImperativeHandle} from 'react';
...
// props子组件中需要接受ref
const ChildComp = ({cRef}) => {
const = useState();
// 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
useImperativeHandle(cRef, () => ({
// changeVal 就是暴露给父组件的方法
changeVal: (newVal) => {
setVal(newVal);
}
}));
...
return (
<div>{val}</div>
)
}
</pre>
</div>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">/* FComp 父组件 */
import {useRef} from 'react;
...
const FComp = () => {
const childRef = useRef();
const updateChildState = () => {
// changeVal就是子组件暴露给父组件的方法
childRef.current.changeVal(99);
}
...
return (
<>
{/* 此处注意需要将childRef通过props属性从父组件中传给自己 cRef={childRef} */}
<ChildCompcRef={childRef} />
<button onClick={updateChildState}>触发子组件方法</button>
</>
)
}
</pre>
</div>
<p> </p>
<p> </p>
<p>方法二、参考react官方文档：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">import {useState, useImperativeHandle,forwardRef} from 'react';
// props子组件中需要接受ref
let ChildComp = (props,ref) => {
// 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
useImperativeHandle(ref, () => ({
// changeVal 就是暴露给父组件的方法
changeVal: (newVal) => {
}
}));
return (
<div>{val}</div>
)
}
ChildComp = forwardRef(ChildComp)
</pre>
</div>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">/* FComp 父组件 */
import {useRef} from 'react';
const FComp = () => {
const childRef = useRef();
const updateChildState = () => {
// changeVal就是子组件暴露给父组件的方法
childRef.current.changeVal(99);
}
return (
<>
<ChildComp ref={childRef} />
<button onClick={updateChildState}>触发子组件方法</button>
</>
)
}
</pre>
</div>
<p> </p>
<p> 注意：</p>
<p><code>useRef</code> 仅能用在 FunctionComponent，<code>createRef</code> 仅能用在 ClassComponent。</p><br><br>
来源：https://www.cnblogs.com/muamaker/p/11647626.html
頁:
[1]