React - 访问组件库的子 DOM

Question

我正在使用一个组件库，它呈现嵌套在多个 div 元素中的 input 字段

<ComponentLibrary />

这个组件库渲染一棵类似于下面的树：

<div className={outerDiv}>
  <div>
    <input type="text" />  // This the element I'm trying to access
  </div>
</div>

我构建了一个自定义组件，它包装了ComponentLibrary，如下所示：

<MyCustomComponent>
  <ComponentLibrary />
</MyCustomComponent>

我无权修改组件库，但我需要访问它在我的组件中的 input 字段。

const MyCustomComponent = (props) => {
  const inputRef = useRef();

  return (
    {React.cloneElement(props.children, {
      ref: inputRef // This ofcourse references the 'outerDiv'
    }}
  );
}

一些可能的相关说明，当我console.log(props.children)。虽然组件是 react 元素，但类型是前向引用。

> children:
  $$typeof: Symbol(react.element)
  ref: null
  > type: {$$typeof: Symbol(react.forward_ref)}

下面是我做了一些尝试：

{React.Children.map(props.children, child => {
   console.log(child) // Only logs the Component element. No reference of DOM nodes
}

我得到的最接近的是使用我在上面第四个代码块中创建的inputRef。

console.log(inputRef.current)
// Logs `outerDiv` element

console.log(inputRef.current.children[0]?.children[1]?.children[1])
// Returns the right element, but an absolute mess. Is this my best solution?

Answer 1

我可能在这里理解错了，但通过阅读您的问题，我认为ComponentLibrary 看起来像这样：

const ComponentLibrary = React.forwardRef((props, ref) => (
  <div ref={ref}>
    <div>
      <input type="text" />
    </div>
  </div>
));

我假设这是因为 props.children 的 type 属性的值为

$$typeof: Symbol(react.forward_ref)

在复制您的 MyCustomComponent 设置时

const MyCustomComponent = (props) => {
  const inputRef = useRef();

  useEffect(() => {
    console.log(inputRef.current); 
  });

  return React.cloneElement(props.children, {
    ref: inputRef,
  });
};

inputRef.current 注销以下元素：

<div>
  <div>
    <input type="text" />
  </div>
</div>

您可以使用children 属性来查找子元素并将其链接起来以最终获得输入元素，就像您在示例中所做的那样，但您也可以使用Element.querySelector 并通过其属性和/或定位元素输入。

例如：

console.log(inputRef.current.querySelector('input[type="text"]'));