javascript - react : get DOM position for one of the children of component

Question

我有一个非常烦人的问题，我的组件需要帮助。它在这样的上下文中使用:

<table>
  <thead>/* ... */</thead>
  <tbody>
    <COMPONENT>
      <ChildComponent>/* ... */</ChildComponent>
      <ChildComponent>/* ... */</ChildComponent>
      <ChildComponent>/* ... */</ChildComponent>
    </COMPONENT>
  </tbody>
</table>

ChildComponent 是一个包含其他组件但最终呈现简单 HTML 的组件 <tr>

在 component.tsx 中，我需要获取第 n 个子节点的 DOM 值(offsetTop 和 clientHeight)。

我已经尝试了很多事情:

• ReactDOM.findDOMNode(children[n])给我:

argument appears to not be a ReactComponent. Keys: $$typeof, type, key, ref, props, _owner, _store

• children[n].ref只给我 null
• 不能给 child 添加 ref
• 此类作品:

children.map((child, index) =>
    index === n ? (
        <div style={{display: contents}} key={index} ref={ref}>
    ) : child
)

给我警告(但有效!):

index.js:2178 Warning: validateDOMNesting(...): cannot appear as a child of . in tr (created by FoldControlContainer) ...

有更好的解决方案吗？我尝试使用 <> 或其他对 DOM 组件“透明”而不是 div , 但它没有用。

Answer 1

使用 React.cloneElement 为 child 设置 refs:https://reactjs.org/docs/react-api.html#cloneelement例如:

React.cloneElement(child, {ref: this.setChildRef})}

export default class Test extends React.Component {

  childrenRefs = {}

  setChildRef = index => el => this.childrenRefs[index] = el;

  showInfo = () => {
    console.log('children', Object.keys(this.childrenRefs).map(key => this.childrenRefs[key].offsetTop))
  }

  render() {

    return (
      <div>
        { React.Children.toArray(this.props.children).map((c, index) => React.cloneElement(
          c,
          {ref: this.setChildRef(index)},
        ))}
        <button onClick={this.showInfo} >test</button>
      </div>
    );
  }
} 

这里是完整工作示例的链接:https://stackblitz.com/edit/react-cf33ge打开右下角的控制台以查看输出。