子供の機能として作成された子どもたちに子どもの小物としての参照を維持する

Question

私は現在、Feedのコンポーネントを持っています。項目の配列であるdata propと、データをDOM要素にマップする機能を意図したchildren propを受け入れます。

今、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要素への参照が必要になります。

これはどのように反応させることができますか？

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