JSX Attributes

ref引用

编辑此页面

ref是一种在JSX中获取底层DOM元素的方法。虽然直接将元素赋值给变量也是可行的，但在JSX流程中保留组件会更加优化。ref在渲染时分配，但在元素连接到DOM之前就已完成。ref有两种使用方式。

// 通过ref直接赋值给变量
let myDiv;


// 使用onMount或createEffect在连接到DOM后进行读取
onMount(() => console.log(myDiv));


<div ref={myDiv} />


// 或者使用回调函数（在连接到DOM之前调用）
<div ref={el => console.log(el)} />

ref也可以用于组件。但它们仍需要在另一端进行绑定。

function MyComp(props) {
  return <div ref={props.ref} />
}


function App() {
  let myDiv
  onMount(() => console.log(myDiv.clientWidth))
  return <MyComp ref={myDiv} />
}
报告此页面问题