Keep Ref auf Kinder durch Funktion als Kind Prop erstellt

Question

Ich habe derzeit eine Feed Komponente. Es akzeptiert eine data Requisite, die ein Array von Elementen ist, und eine children Requisite, die eine Funktion zum Zuordnen der Daten zu einem DOM-Element sein soll.

Im Moment versuche ich die Funktionalität zu einem beliebigen Element in dieser data Eigenschaft, die von der children Funktion zugeordnet wurde, zu scrollen. Das bedeutet jedoch, dass ich einen Verweis darauf speichern muss. Ich bin mir nicht sicher, welche Syntax/API dafür geeignet ist. Hier ist mein Grundcode:

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

Um eine Komponente zu bewegen, werde ich einen Verweis auf die DOM-Elemente benötigt, die durch die children Funktion kartiert wurden.

Wie kann dies in reagieren?

Answer 1

Ich denke, ich habe eine Lösung gefunden. DOM-Elemente haben eine Eigenschaft namens childNodes. Daher kann ich einfach auf meinen Container verweisen und die untergeordneten Knoten abrufen, die von children zugeordnet wurden. Ich kann dann Knoten nach Index greifen.

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