时间戳

首页 > 解决方案 > 如何使用 createRef() 将渲染道具内的子元素的 ref 转发到容器组件？

javascript - 如何使用 createRef() 将渲染道具内的子元素的 ref 转发到容器组件？

问题描述

我有一个<Controller />组件，它在渲染道具中渲染一堆元素。在 render 道具中，我想将一堆元素的 CreatRef() refs 传递回它们的 parent <Controller />。

  <Controller render={(props) => (
    <div className="ref-one">
      <div className="ref-two">
        <Stepper index={props.index} />
        <p>one</p>
        <p>two</p>
        <p>three</p>
        <h1>{props.title}</h1>
      </div>
    </div>
  )}
  />

所以 refs 应该可以在 Controller 中访问。如何做到这一点？

标签： javascriptreactjs

解决方案

在 React 中使用refprop 时，它总是分配给您附加到的组件，例如，如果您附加createRef()到ref控制器上的 prop，则参考集将是控制器组件。

如果您想将createRef()更深的内容传递给组件，则需要使用不同的道具名称，例如innerRef，您可以innerRef使用该组件将道具分配给子元素，ref例如ref={props.innerRef}

此外，您可以使用React.forwardRef()函数组件来允许您仍然使用 ref 但控制分配给哪个子元素。

https://reactjs.org/docs/forwarding-refs.html

推荐阅读