React Hooks useContext 传参数

蒲厷渶之戀

于 2024-01-11 14:23:58 发布

阅读量724

点赞数 13

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/lvkelly/article/details/135528042

版权

本文介绍了如何在React项目中封装context.js文件，以及如何在父组件和子组件间通过ContextAPI进行数据传递和方法调用。主要涉及Provider和useContext的使用，展示了在工作流设计组件中的具体实践。

摘要由CSDN通过智能技术生成

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>
      <Drawer
        className="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>
          ) : (
            <Input
              ref={nodeTitleRef}
              defaultValue={form.nodeName}
              onBlur={(e) => handleSaveTitle(e)}
            />
          )}
        </div>
        <Content>
          <Form label-position="top">
            <Form.Item label="谁可以发起此审批">
              <Button
                type="primary"
                shape="round"
                size="small"
                icon={<PlusOutlined />}
                onClick={() => handleSelectHandle(2, form.nodeRoleList)}
              >
                选择角色
              </Button>
            </Form.Item>
            {form.nodeRoleList && form.nodeRoleList.length == 0 ? (
              <Alert
                message="不指定则默认所有人都可发起此审批"
                type="warning"
              />
            ) : null}
          </Form>
        </Content>
        <Footer>
          <Button type="primary">保存</Button>
          <Button>取消</Button>
        </Footer>
      </Drawer>
    </React.Fragment>
  );
};

export default Promoter;

个人小结，不喜勿喷。