之前项目中使用了 antd pro 中的 可编辑表格 (EditableProTable) ，在页面中表格要经过多层遍历后组成的新页面，所以我将之抽成了一个公用的组件，另外在遍历的最外层需要通过一个按钮统一提交表格数据，但是提交数据之前需要对每一个表格进行非空校验。

遍历中引入组件这个没啥好说的，根据以往的经验来说，一般要获取某个 JSX 节点都是采用的 useRef() 这个 Hook ，大多写法如下：

const ref = useRef(null);
<div ref={ref}>...</div>
这里主要说的是怎么一次性获取多个子组件实例，用到这个场景的也有，可能也不大多，我刚开始也在网上找了一大堆，基本没有相关的答案，这整的我 cv大法 自然也用不了，可是项目又赶得急，总的想办法解决吧，最后我盯上了ChtGPT，通过智能答案在这里获取到了一定的参考，如下：
 

 既然已经有了灵感（参考），那就依样画葫芦呗，开整。
 
下面是我经过项目实践后，再次做的一个案例，希望能够对有需要的朋友一些帮助，可能写的不够优雅，还请大家多多包涵。如有更好的方式，请大家多多留言扶正，多谢。
 
完整代码：
 
import { Button, message } from "antd";
import { useImperativeHandle, useRef } from "react";
interface paramsType {
    id: number,
    title: string,
interface validateFieldsObjType {
    [key: number]: boolean;
// 子组件
const ChildComponentPage:React.FC = (props: any) => {
    const { id, title, onRef } = props;
    const divStyleObj = {
        width: '100%',
        height: '100px',
        background: 'red',
        marginTop: '20px',
        fontSize: '20px',
        color: '#fff'
    useImperativeHandle(onRef, () => {
        return {
    const func = ():boolean => {
        console.log(`${title}(${id})被触发了`)
        if (id ===2) return false;
        else return true;
    return (
        <div style={divStyleObj}>【子组件】==》{title}--{id}</div>
// 父组件
const TestRef:React.FC = () => {
    const childRefs: any = useRef({});
    // mock源数据
    const datasource:paramsType[] = [
        { id: 1, title: '组件-天天', },
        { id: 2, title: '组件-小灰', },
        { id: 3, title: '组件-阿奇', },
        { id: 4, title: '组件-驽马', },
        { id: 5, title: '组件-小栗', },
    // 异步获取所有子组件校验状态
    const getChildRefReturnStateFn = (childRefIdsArry:any) => {
        const validateFieldsObj: validateFieldsObjType = {};
        childRefIdsArry.forEach((id: number, index: number) => {
            const childRef = childRefs.current[id];
            const childReturnState = childRef.func();
            console.log('子组件实例返回状态：', id, childReturnState)
            validateFieldsObj[id] = childReturnState;
        return validateFieldsObj;
    // 点击事件
    const clickThisFn = async () => {
        const childRefIdsArry:any[] = Object.keys(childRefs.current);
        const validateFieldsObj: any = await getChildRefReturnStateFn(childRefIdsArry);
        console.log('子组件检查结果：', validateFieldsObj)
        const validateFieldsLen = Object.values(validateFieldsObj).filter((type)=>!type);
        if (childRefIdsArry.length !== validateFieldsLen.length) console.log('校验不通过，请再次检查数据。')
        else console.log('校验已通过')
    return (
            <div style={{ width: '100%', background: 'orange', padding: '20px' }}>
                    datasource.map(({ id, title }: paramsType, index: number) => {
                        return <ChildComponentPage key={id} id={id} title={title} onRef={(_ref: React.RefObject<HTMLInputElement>) => childRefs.current[id] = _ref} />
            </div>
            <Button type="primary" onClick={clickThisFn}>检验全部子组件</Button>
export default TestRef;
成功运行后的界面如下：
 
点击左侧按钮后，通过控制台可以看到相关的运行信息。
 
知识点总结
 
uesRef() 作对象处理
 
useImperativeHandle() 父组件操作引入子组件的内部方法
 
关于这个问题的解决方法，就在上面的代码里面了，如果对上面的Hook使用还不清楚的，这里就不再赘述，请自行网上查看。
 
如果对你有所帮助，麻烦咚咚你的黄金手指，请点赞，搜藏。
一个很简单的左右布局。要实现点击左侧数据更新右侧表格。这个表格因为在多处用到，所以被单独封装。表格勾选和全选的逻辑写在了表格这个组件内部。而这也导致了一个问题：每次点击左侧的数据，右侧的表格并没有重置状态。那如何解决这个问题？
表格的全选和勾选与全选的状态关联是根据selectRowKeys来控制的。如果selectRowKeys=[]，那表格每行的勾选状态将被清空。所以关键就是要在每次点击左侧树形菜单的时候进selectRowKeys的操作。
第一种方法：既然表格的状态被
这个React应用程序是一个React应用程序，它从“  ”读取用户，并显示输入内容来搜索具有用户名的用户。
您可以简单地将文件下载到计算机上。 在终端中，通过键入npm install 。 然后输入npm install --save axios来npm install --save axios 。 并键入npm start以启动程序。
拉请求是受欢迎的。 对于重大更改，请先打开一个问题以讨论您要更改的内容。 请确保适当更新测试。
                                    React的函数式组件式本身是没有状态的和其他类似于class组件的功能，所以一开始，函数组件一般只作为容器组件存在，用来展示父级组件传入的值。而16.8之后出现的 hooks(钩子)，打开了函数式组件的新大门。
useState
作用：用来记录函数式组件的状态。
使用方式：
import React, { useState } from 'react'
const [n, setN] = React.useState(0)
例子：
import React, {useState} from
                                    useRef 返回一个可变的 ref 对象，其内部只有一个 current 属性被初始化为传入的参数（initialValue）useRef 返回的 ref 对象在组件的整个生命周期内持续存在更新 current 值时并不会触发页面的重新渲染（re-render）useRef 会在每次渲染时返回同一个 ref 对象本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
传入的泛型是子组件存放在ref.current中的数据格式，
（如果子组件内部绑定了自己的ref，那用的泛型为useRef
ref是绑定在自定义组件上，子组件直接从props中获取ref是获取不到的，
这是因为ref不是prop属性，会像key
                                    正文开始~这篇文章是 React 架构演变的第二篇，上一篇主要介绍了更新机制从同步修改为异步，这一篇重点介绍 Fiber 架构下通过循环遍历更新的过程，之所以要使用循环遍历的方式，是因为递归更新过程一旦开始就不能暂停，只能不断向下，直到递归结束或者出现异常。递归更新的实现React 15 的递归更新逻辑是先将需要更新的组件放入脏组件队列(这里在上篇文章已经介绍过，没看过的可以先看看《Re...
component文件夹=》navWrap文件夹=〉navWrap.js
2、父组件的js
import React, {Component} from 'react';
import Pic from 'pic/pic';
let list = [
        img: require('images/1.jpg'),
        title: '易烊千玺',...
                                    大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群大家好，我是小杜杜，React Hooks的发布已经有三年多了，它给函数式组件带来了生命周期，现如今，Hooks逐渐取代class组件，相信各位 React 开发的小伙伴已经深有体会，然而你真的完全掌握hooks了吗？知道如何去做一个好的自定义hooks吗？我们知道Rea...
                                    项目中遇到一个父组件需要触发孙子组件方法的需求。项目又没有安装redux,经查阅，可以实现父调用子组件方法，父调孙还需要多处理一层。下面是父组件如何实现使孙子组件刷新的代码