实习小记4.28（antd中Modal的子组件渲染问题）

看图片：用Modal的时候是拿不到绑定的ref的值，但是我换成div就可以

这里有一个很大的问题，就是子组件写在了父组件里面，并且ref还定义在了父组件里面，这种做法是不可取的（会引起各种各样奇怪的问题）。应该把子组件抽离出来，不依赖父组件。 解耦后的代码：

import {  Avatar, Modal } from 'antd'
import NiceModal, { useModal } from '@ebay/nice-modal-react'
import { useEffect, useRef } from 'react'
const ModalContent = () => {
  console.log('Modal-content')
  const foucsFirstDefaultAvatarRef = useRef(null)
  //挂载之后打印ref的值
  useEffect(() => {
    console.log('myRef', foucsFirstDefaultAvatarRef.current)
  }, [])
  return (
    <>
      <div>
        <div>默认头像</div>
        <div className="w-[100%] h-[1px] mt-[10px] mb-[7px] bg-[#ECEEF2]"></div>
        <div className="flex justify-between mb-[17px]">
          {new Array(5).fill(0).map((_, index) => (
            <div
             ref={index===0?foucsFirstDefaultAvatarRef: null}
              className=" w-[66px] h-[66px] flex justify-center items-center focus:border border-[#FF8910] rounded-[33px] cursor-pointer"
            >
              <Avatar size={60} src={`/images/avatar/default_avatar${index + 1}.png`} />
            </div>
          ))}
        </div>
      </div>
    </>
  )
}
const SetAvatarModal = () => {
  console.log('Modal')
  //绑定第一个默认头像DOM
 
  const modal = useModal()
  const handleOnOk = () => {
    console.log('ok')
    modal.remove()
  }
  const handleOnCancel = () => {
    console.log('cancel')
    modal.remove()
  }

  return (
    <Modal open={modal.visible} width={404} onOk={handleOnOk} onCancel={handleOnCancel} destroyOnClose={true}>
      <ModalContent />
    </Modal>
  )
}

export default NiceModal.create(SetAvatarModal)

解耦之后可以正确拿到ref的值，至于为什么上面那个错误代码中，把Modal换成div就可以拿到我就再研究了，因为本身那种代码书写方式就有问题。

附上代码链接：github;
对应代码在\src\components\addModal\index.jsx