Question

如何反应我可以获取原生html元素或获取传递给道具中的子元素的边界？

给出下一个组成部分：

class SomeComp extends Component {
    componentDidMount() {
       this.props.children.forEach(child => {
           // I need the native element to get the offsetTop and the .getBoundingClientRect() func of html 
       })
    }
    render() {
        <div>
         {this.props.children}
        </div>
    }
}

Answer 1

首先，您可以阅读Refs and the DOM。

然后你可以尝试将你的子元素与每个元素映射到另一个元素，并通过prop传递ref的实例。之后，您可以通过该ref实例访问包装器的特定DOM元素。

请参阅下面的示例（示例自React 16.3起有效）：

解决方案已更新，以停止添加其他div作为儿童包装。

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.refsArray = [];
  }
  
  componentDidMount() {
    this.refsArray.forEach(ref => {
      console.log(ref.current.offsetTop);
    })
  }

  render() {
    return ( 
      <div>
        {React.Children.map(this.props.children, (child, index) => {
          const ref = React.createRef();
          this.refsArray.push(ref); 

          return React.cloneElement(child, {ref, key: index});
        })}
      </div>
    );
  }
}

ReactDOM.render((
  <App>
    <div>This</div>
    <div>is</div>
    <div>my</div>
    <div>test</div>
  </App>
), document.getElementById('root'));

<div id="root"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>

实现特定已装载组件的特定DOM元素的另一种方法是通过ReactDOM.findDOMNode(component)（请参阅official documentation）。但建议不要使用此方法，而是使用refs功能。

Answer 2

这是我发现的最佳解决方案，可以提供我想要的内容

只是映射子项并返回带有附加ref的元素的克隆

this.props.children.map((element, index) => (
    <element.type {...element.props} ref={r => do what ever with ref} key={index}> {element.props.children} </element.type>
)

React获取在props中传递的子元素的本机元素或高度和宽度

2 个答案: