继续涉及通过功能作为儿童道具创建的孩子

Question

i当前有一个Feed组件。它接受 data prop，即项目数组和一个children Prop，它旨在将数据映射到DOM元素。

。

现在，我正在尝试创建功能，以滚动到由children函数映射的data属性中的任何元素。但是，这意味着我需要存储对其的参考。我不确定适合的语法/API。这是我的基本代码：

class ScrollableFeed extends Component {
  static propTypes = {
    data: PropTypes.array,
    children: PropTypes.func,
  };
  container = null;
  render() {
    const { data, children } = this.props;
    return (
      <div
        className={styles.feed}
        onScroll={this.onScroll}
        ref={e => { this.container = e; }}
      >
        {data.map(children)}
      </div>
    );
  }
}

为了滚动到一个组件，我需要参考children函数映射的DOM元素。

如何在React中完成？

Answer 1

认为我找到了一个解决方案。DOM元素具有称为儿童诺德斯的属性。因此，我只能引用我的容器并抓住子节点，这将由children绘制。然后，我可以通过索引抓住节点。

getNodeAtIndex(index) {
  const { childNodes = [] } = this.container;
  const nodeIndex = Math.min(Math.max(index, 0), childNodes.length - 1);
  return childNodes[nodeIndex];
}