Question

我目前有一个Feed组件。它接受data道具，它是一个项目数组，以及children道具，旨在将数据映射到DOM元素。

现在，我正在尝试创建功能以滚动到data函数映射的此children属性中的任何元素。但是，这意味着我需要存储对它的引用。我不确定适当的语法/ 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元素的引用。

怎样才能做出反应？

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];
}

保持对作为儿童道具的功能创造的儿童的参考

1 个答案: