import React from 'react'

function MyComponent() {
    return (
        <div>
            <p style={{color: 'red'}}>Testing to see if my component renders!</p>
        </div>
    )
}

export default MyComponent;

现在，让我们创建一个文件CustomIframe.js

import React, { useState } from 'react'
import { createPortal } from 'react-dom'

const CustomIframe = ({
  children,
  ...props
}) => {
  const [contentRef, setContentRef] = useState(null)

  const mountNode =
    contentRef?.contentWindow?.document?.body

  return (
    <iframe {...props} ref={setContentRef}>
      {mountNode && createPortal(children, mountNode)}
    </iframe>
  )
}

export default CustomIframe;

1. ref作为回报做了什么？为什么需要它？为什么在ref={}中放置setContentRef而不是contentRef？
   1.除此之外，为什么{... props}出现在iframe标签中，当它们没有在任何地方使用时？
   我试着在网上找ref，只知道useRef钩子，不知道ref