1、封装 context.js 文件，如下图：

import { createContext } from "react";const Context = createContext(null);export default Context;

 2、父级组件引入 context.js 文件，并用Provider包裹子组件，值通过 value 传递，如下图：

import React, { useState, useRef } from "react";// context
import Context from "./context";// components
import NodeWrap from "./nodeWrap";
import UseSelect from "./useSelect";// css
import "./style.scss";const WorkFlow = (props) => {const useSelectRef = useRef(null);const [nodeConfig, updateNodeConfig] = useState(props.data || {});const handleSelectRole = (type, data) => {useSelectRef.current.show(type, data);};return (<div className="workflow-design"><div className="workflow-design-box-scale"><Context.Provider value={{ select: handleSelectRole }}><NodeWrap nodeConfig={nodeConfig} /></Context.Provider><div class="end-node"><div class="end-node-circle"></div><div class="end-node-text">流程结束</div></div></div><UseSelect ref={useSelectRef} /></div>);
};export default WorkFlow;

 3、子组件引入 context.js 文件，并通过 useContext 取到对应的值或方法， 如下图：

import React, { useState, useRef, useEffect, useContext } from "react";
import { Button, Drawer, Input, Layout, Form, Alert } from "antd";
import { UserOutlined, FormOutlined, PlusOutlined } from "@ant-design/icons";// context
import Context from "../context";// components
import AddNode from "../addNode";// css
import "./style.scss";const { Header, Footer, Content } = Layout;
const Promoter = (props) => {const { select } = useContext(Context);const nodeTitleRef = useRef(null);const [form, updateForm] = useState({});const [isEditTitle, updateIsEditTitle] = useState(false);const [open, updateOpen] = useState(false);const [node, updateNode] = useState(props.nodeConfig || {});const toText = () => {if (node.nodeRoleList && node.nodeRoleList.length > 0) {return node.nodeRoleList.map((item) => item.name).join("、");} else {return "所有人";}};const handleShow = () => {const stateForm = { ...node };updateForm(stateForm);updateIsEditTitle(false);updateOpen(true);};const handleEditTitle = () => {updateIsEditTitle(true);setTimeout(() => {nodeTitleRef.current.focus();}, 100);};const handleSaveTitle = (e) => {const stateForm = { ...form };stateForm.nodeName = e.target.value;updateForm(stateForm);updateIsEditTitle(false);};const handleSelectHandle = (type, list) => {select(type, list);};useEffect(() => {updateNode(props.nodeConfig);}, []);return (<React.Fragment><div className="node-wrap"><div className="node-wrap-box start-node" onClick={handleShow}><div className="title" style={{ background: "#576a95" }}><UserOutlined /><span>{node.nodeName}</span></div><div className="content"><span>{toText()}</span></div></div><AddNode nodes={node.childNode} /></div><DrawerclassName="promoter-drawer"placement="right"open={open}closable={false}width={500}><div className="node-wrap-drawer-title">{!isEditTitle ? (<label onClick={handleEditTitle}><span>{form.nodeName}</span><FormOutlined className="node-wrap-drawer-title-edit" /></label>) : (<Inputref={nodeTitleRef}defaultValue={form.nodeName}onBlur={(e) => handleSaveTitle(e)}/>)}</div><Content><Form label-position="top"><Form.Item label="谁可以发起此审批"><Buttontype="primary"shape="round"size="small"icon={<PlusOutlined />}onClick={() => handleSelectHandle(2, form.nodeRoleList)}>选择角色</Button></Form.Item>{form.nodeRoleList && form.nodeRoleList.length == 0 ? (<Alertmessage="不指定则默认所有人都可发起此审批"type="warning"/>) : null}</Form></Content><Footer><Button type="primary">保存</Button><Button>取消</Button></Footer></Drawer></React.Fragment>);
};export default Promoter;

个人小结，不喜勿喷。