轻便的传值组件

title: 轻便的传值组件 id: 6605060778dda8471e4f8488ad2c2a9d tags: [] date: 2000/01/01 00:00:00 updated: 2022/12/09 13:40:03 isPublic: true --#|[分隔]|#--

轻便的传值组件

痛点：

经常会有弹出弹框的功能，弹框的内容我们经常会单独封装成一个组件，组件的内容和展示关闭，通过父组件传入所需要的数据和弹框状态的props来控制。

关键就是传入props数据，都需要在父组件中提前用 useState 声明好，在弹出前重新赋值，而声明和重新赋值的操作会很累赘。

尤其是，明明某些数据在这个页面本不需要声明的，可为了给弹框组件传props，偏偏还就需要声明一下的时候，尤其心烦。

还有就是，如果这个组件使用率比较高，每个引入弹框组件的父组件，都需要声明、赋值，那心里就更膈应了。。。使用率高的组件反到更招人膈应？很反常理好掰。

以下是常规的不友好的写法示范：

// 父组件
import React, { useState } from "react";
import ShowData from './ShowData'

export default function Page() {
  // 声明一堆数据
  const [show, setshow] = useState(false)
  const [title, settitle] = useState('')
  const [data, setdata] = useState(null)
  const [userInfo, setuserInfo] = useState(null)
  const [isOwner, setisOwner] = useState(null)

  // 弹框打开时传入数据
  function showData(_title, _data, _userInfo, _isOwner) {
    settitle(_title)
    setdata(_data)
    setuserInfo(_userInfo)
    setisOwner(_isOwner)
    setshow(true)
  }

  // 弹框关闭
  function onClose(success) {
    setshow(false)
  }

  return (
    <div>
      <button onClick={showData}>展示弹框</button>
      <ShowData
        show={show}
        onClose={onClose}
        title={title}
        data={data}
        userInfo={userInfo}
        isOwner={isOwner}
      />
    </div>
  )
}


// 封装弹框组件
import { Modal } from 'antd'

export default function ShowData(show, onClose, title, data, userInfo, isOwner) {
  return (
    <Modal
      title={title}
      open={show}
      onCancel={() => onClose(false)}>
        展示的内容，可能用到props传进来的数据们
    </Modal>
  )
}

可见，给弹框组件传入的props都需要在父组件声明一遍，很烦人。

解决方案：

依托于react的 Hooks 系统，我们使用 use 来封装弹框组件后就很友好了，把和弹框组件的交互，抽象成一个方法。

声明的操作都放在弹框组件中，因为弹框组件才是那些变量的使用者，父组件只用在调用弹出组件的方法时，把数据作为参数传进去就可以了：

// 父组件
import React from "react";
import useShowData from './useShowData'

export default function Page() {
  const [show, ShowDataModal] =  useShowData()

  // 弹框打开
  function showData(title, data, userInfo, isOwner) {
    // 通过调用方法打开弹框，不用再声明这些变量了
    show(onClose, title, data, userInfo, isOwner)
  }

  // 弹框关闭
  function onClose(success) {
    // 通过判断success，来判断弹框想做的时完成了，还是说只是关闭的弹框，自定义
  }

  return (
    <div>
      <button onClick={showData}>展示弹框</button>
      {/* 此处需要把dom放进来 */}
      {ShowDataModal}
    </div>
  )
}

// 封装弹框组件
import React, { useState, useRef } from "react";
import { Modal } from 'antd'

export default function useShowData() {
  // 同样声明一堆数据，这些都是此组件要用到的
  const [show, setshow] = useState(false)
  const [title, settitle] = useState('')
  const [data, setdata] = useState(null)
  const [userInfo, setuserInfo] = useState(null)
  const [isOwner, setisOwner] = useState(null)
  // 使用 useRef 声明，这个方法会在弹框关闭时调用
  const onClose = useRef(null)
  
  // 展示弹框
  function showModal(_onClose, _title, _data, _userInfo, _isOwner) {
    // 从传入的参数中依次读取赋值，可以更友好的做值的检测处理
    settitle(_title)
    setdata(_data)
    setuserInfo(_userInfo)
    setisOwner(_isOwner)
    // 赋值弹框被关闭的方法
    onClose.current = _onClose
    setshow(true)
  }

  return [showModal, (
    <Modal
      title={title}
      open={show}
      onCancel={() => onClose.current(false)}>
        展示的内容，可能用到props传进来的数据们
    </Modal>
  )]
}