ref 的作用是什么以及為什么它在 iframe 中是必要的？

Question

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？

2. 除此之外，為什么 {...props} 出現在 iframe 標簽中，而它們在任何地方都沒有被消耗？

我試着在網上找 ref，只知道 useRef hook，不知道 ref

Answer 1

1. setContentRef會將 iframe 元素引用分配給contentRef ，因此您可以訪問 iframe 中可用的本機方法和屬性，例如contentWindow

2. {...props}會將 props 中的所有值作為 iframe 元素的屬性展開