将 ref 保留为由函数创建的子项作为子项

Question

我目前有一个 Feed 组件。它接受一个 data 属性，它是一个项目数组，以及一个 children 属性，它是一个将数据映射到 DOM 元素的函数。

现在，我正在尝试创建滚动到此 data 属性中由 children 函数映射的任何元素的功能。但是，这意味着我需要存储对它的引用。我不确定 syntax/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 个元素有一个属性称为 childNodes。因此，我可以只引用我的容器并获取子节点，这些子节点将由 children 映射出来。然后我可以通过索引抓取节点。

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

将 ref 保留为由函数创建的子项作为子项

Keeping ref to children created by function as child prop

javascript

reactjs

scroll

map-function

react-proptypes