React Hooks useContext 传参数

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 (
    

      

        
          
        
        

          

          
流程结束
        
      
      
    
  );
};

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 (
    
      

        

          

            
            {node.nodeName}
          
          

            {toText()}
          
        
        
      
      
        

          {!isEditTitle ? (
            
              {form.nodeName}
              
            
          ) : (
             handleSaveTitle(e)}
            />
          )}
        
        
          

            
              }
                onClick={() => handleSelectHandle(2, form.nodeRoleList)}
              >
                选择角色
              
            
            {form.nodeRoleList && form.nodeRoleList.length == 0 ? (
              
            ) : null}
          
        
        

          保存
          取消
        
      
    
  );
};

export default Promoter;

个人小结，不喜勿喷。