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;
- ref作为回报做了什么?为什么需要它?为什么在ref={}中放置setContentRef而不是contentRef?
1.除此之外,为什么{... props}出现在iframe标签中,当它们没有在任何地方使用时?
我试着在网上找ref,只知道useRef钩子,不知道ref
1条答案
按热度按时间sz81bmfz1#
setContentRef
会将iframe元素引用分配给contentRef
,以便您可以访问iframe(如contentWindow
)中可用的本机方法和属性{...props}
将props中的所有值作为属性分配给iframe元素