从 React 子元素获取 DOM 节点

小能豆

从 React 子元素获取 DOM 节点

javascript

使用React.findDOMNodev0.13.0 中引入的方法，我能够通过映射获取传递到父级的每个子组件的 DOM 节点this.props.children。

但是，如果某些子项恰好是 React 元素而不是组件（例如，其中一个子项是<div>通过 JSX 创建的），React 会抛出不变违规错误。

有没有办法在挂载之后获取每个子项的正确 DOM 节点，而不管子项属于哪个类？

阅读 53

2024-06-07

小能豆

this.props.children应该是 ReactElement 或 ReactElement 数组，但不是组件。

要获取子元素的 DOM 节点，您需要克隆它们并为它们分配一个新的 ref。

render() {
  return (
    <div>
      {React.Children.map(this.props.children, (element, idx) => {
        return React.cloneElement(element, { ref: idx });
      })}
    </div>
  );
}

然后您可以通过访问子组件this.refs[childIdx]，并通过检索它们的 DOM 节点ReactDOM.findDOMNode(this.refs[childIdx])。

2024-06-07

小能豆

要获取传递给父组件的每个子组件或元素的 DOM 节点，无论子组件是 React 组件还是 React 元素，您都可以进行迭代this.props.children并分别处理这两种情况。

以下是实现此目的的方法：

使用React.Children.map来迭代this.props.children。
对于每个子元素，使用检查它是否是有效的 React 元素React.isValidElement。
如果子项是 React 组件，则使用React.findDOMNode它来获取 DOM 节点。
如果子元素是普通的 DOM 元素（如<div>），则可以直接引用它。

下面是在父组件中实现此方法的示例：

jsx复制代码import React from 'react';
import ReactDOM from 'react-dom';

class ParentComponent extends React.Component {

  com
componentDidMount() {
    React.Children.forEach(this.props.children, child => {
      if (React.isValidElement(child)) {
        if (typeof child.type === 'function') {
          // It's a React component, find the DOM node using findDOMNode
          const domNode = ReactDOM.findDOMNode(this.refs[child.key]);
          console.log('DOM Node of component:', domNode);
        } else {
          // It's a plain DOM element
          console.log('DOM Node of element:', child);
        }
      }
    });
  }


        }
      }
    });
  }

  rende
render() {
    return (

      <div>
        {<div>
        {React.Children.map(this.props.children, child => {
          if (React.isValidElement(child)) {
            if (typeof child.type === 'function') {
              // Clone the element to add a ref to it
              return React.cloneElement(child, { ref: child.key });
            }
            // For plain DOM elements, just return as is
            return child;
          }
          return null;
        })}
      </div>
    );
  }
}

const ChildComponent = () => 
            }


<div>Child Component</div>;

// Usage example

cons
const App = () => (

  <<ParentComponent>
    <ChildComponent key="child1" />
    <div key="child2">Plain Div</div>
  </ParentComponent>






);

export default App;

在此

使用ParentComponent``ReReact.Children.forEach到 itethis.props.children`。
里面componentDidMount，
对于 React 组件，它使用ReactDOM.findDOMNode要得到
在里面render方法ref对它ref是使用

这样，你可以在一个 cons 中同时处理 React 组件和普通 DOM 元素

2024-06-07

从 React 子元素获取 DOM 节点

共2个答案