时间戳

首页 > 解决方案 > React 将 dom 节点作为输入传递给另一个组件

reactjs - React 将 dom 节点作为输入传递给另一个组件

问题描述

我正在尝试通过引用将包装器 Dom 节点传递给子组件。我在下面尝试过，但它说它不是节点。

const wrapperRef = React.createRef()
<Wrapper ref={wrapperRef}>
    <ChildComponent target={wrapperRef} />
<Wrapper>

我正在使用功能组件。关于如何实现它的任何指导？

标签： reactjs

解决方案

正如我在评论中所说，您应该使用 Forwarding Refs 来获取<Wrapper>组件的 DOM 节点。所以它看起来像这样：

主文件

import React from "react";

import Wrapper from "./Wrapper";
import ChildComponent from "./ChildComponent";

function App() {
  const wrapperRef = React.createRef();
  return (
    <div className="App">
      <Wrapper ref={wrapperRef}>
        <ChildComponent target={wrapperRef} />
      </Wrapper>
    </div>
  );
}

Wrapper.js

import React from "react";

const Wrapper = React.forwardRef((props, ref) => {
  return (
    <div ref={ref}>
      <h3>Wrapper Component</h3>
      {props.children}
    </div>
  );
});

export default Wrapper;

ChildComponent.js

import React, { useEffect } from "react";

const ChildComponent = props => {
  useEffect(() => {
    console.log(props.target.current); // -> wrapper container outer <div>
  }, []);

  return (
    <div>
      <p className="lead">THIS IS THE CHILD COMPONENT</p>
    </div>
  );
};

export default ChildComponent;

你可以在这里看到一个简单的例子： https ://codesandbox.io/s/react-forward-ref-to-child-zwcd7

在 ChildComponent 中使用常规 Refs

正如我在评论中提到的，如果你的 JSX 的结构像我发布的代码一样简单（即子组件是父组件的外包装的直接子组件），你也可以使用element.parentNode它来获取 DOM 节点（在这种情况下主文件不会改变）：

Wrapper.js

import React from "react";

const Wrapper = props => {
  return (
    <div>
      <h3>Wrapper Component</h3>
      {props.children}
    </div>
  );
};

export default Wrapper;

ChildComponent.js

import React, { useEffect } from "react";

const ChildComponent = props => {
  let childOuterElement = null;
  useEffect(() => {
    console.log(childOuterElement.parentNode);
  }, []);

  return (
    <div ref={e => (childOuterElement = e)}>
      <p className="lead">THIS IS THE CHILD COMPONENT</p>
    </div>
  );
};

export default ChildComponent;

请记住，这仅在特定情况下有效，如果{props.children}将其放置在<Wrapper>组件中的其他位置，您将获得对该特定 DOM 节点的引用。

推荐阅读