reactjs ref做什么,为什么它在iframe中是必要的?

nx7onnlm  于 2022-12-12  发布在  React
关注(0)|答案(1)|浏览(132)
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
sz81bmfz

sz81bmfz1#

  1. setContentRef会将iframe元素引用分配给contentRef,以便您可以访问iframe(如contentWindow)中可用的本机方法和属性
  2. {...props}将props中的所有值作为属性分配给iframe元素

相关问题