React总结1：React Hooks 中通过父组件调用子组件中的方法

马里千 發表於 2021-10-22 13:56:00

React总结1：React Hooks 中通过父组件调用子组件中的方法

先上示例：
1.子组件
<div class="cnblogs_code">
<pre>import React, {useEffect, useImperativeHandle, forwardRef} from 'react';

function AllProjectTable(props, ref) {

useImperativeHandle(ref, () => ({
handleGetProjectList,
handleStopProject
}));

// 获取项目列表
const handleGetProjectList = () => {
};

// 停止项目运行
const handleStopProject = project => {
};

return (
<>
</>
);
}

export default forwardRef(AllProjectTable);</pre>
</div>
 
2.父组件
<div class="cnblogs_code">
<pre>import React, {useRef} from 'react';
// 引用子组件
import AllProjectTable from './components/AllProjectTable';

function IDEIndex() {
const allProjectTableRef = useRef();

return (
<>
 <AllProjectTable ref={allProjectTableRef}/>
 <button onClick={() => allProjectTableRef.current.handleGetProjectList()}>调用子组件方法</button>
</>
);
}

export default IDEIndex;</pre>
</div>
 
useImperativeHandle 使用
<div class="cnblogs_code">
<pre>useImperativeHandle(ref, createHandle, );</pre>
</div>
　　useImperativeHandle 可以在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。
　　useImperativeHandle 和 forwardRef 配合一起使用（如上子组件）
　　1.ref：定义current 对象的 ref；
　　2.createHandle：一个函数，返回值时一个对象，即这个 ref 的 current；
　　3.对象：即依赖列表，当监听的依赖发生变化，useImperativeHandle 才会重新将子组件的示例属性输出到父组件
　　4.ref 的 current 属性上，如果为空数组，则不会重新输出
　　在使用 useImperativeHandle 之前，要清除 React 关于 ref 转发（透传）这个知识点，主要是使用 React.forwardRef 方法实现的，该方法返回一个组件，参数为函数（并不是函数组件），函数的第一个参数为父组件传递的 props，第二个给父组件传递的 ref ，其目的就是希望可以在封装组件时，外层组件可以通过ref直接控制内层组件或元素的行为。
　　正常情况下 ref 是不能挂载到函数组件上的，因为函数组件没有实例。React 官方为我们提供了 useImperativeHandle 一个类似实例的东西，帮助我们通过 useImperativeHandle 的第二个参数，把返回的对象的内容挂载到父组件的 ref.current 上。
　　forwardRef 会创建一个 React 组件，这个组件能够将其接收的 ref 属性转发到其组件树下的另一个组件中。
<div class="cnblogs_code">
<pre>import React, {useImperativeHandle, forwardRef, useRef, useEffect} from 'react';

const Children = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
hello() {
 console.log('访问到了子组件的方法');
}
}));
});

function Parent() {
const childrenRef = useRef();
useEffect(() => {
childrenRef.current.hello();
}, []);

return (
<>
 <Children ref={childrenRef}/>
</>
);
}

export default forwardRef(Parent);</pre>
</div>
  
来源：https://www.cnblogs.com/zhangning187/p/reactparentchildren111.html

頁: [1]

琼殿技术论坛's Archiver

React总结1：React Hooks 中通过父组件调用子组件中的方法