アプリ、親、子の 3 つのコンポーネントがあります。アプリは、Parent が提供するメソッドを使用して、子を Parent に登録します。これは、親が包含している子の参照を収集する (依存関係マップを作成する) ためのものです。
子には、作成された参照を介して親によって呼び出される Animate という名前のメソッドがあります。
dependencyMap を印刷しようとすると、期待どおりに配列が生成されていることがわかります。
しかし、dependencyMap を使用して Parent から子コンポーネントにアクセスしようとすると、常に子のリストの最後のコンポーネントが呼び出されます。
つまり、Parent.js 内で animateDependentChildren を使用して < CustomComponent > をアニメーション化しようとすると、CustomComponent1 に correctId を渡しても、CustomComponent2 だけがアニメーション化されます。
App.js
export default class App extends React.Component {
render(){
return(
<Parent>
{
(props)=>{
return(
<View>
<CustomComponent1 ref={props.register('s1')} key={1}>Text</CustomComponent1>
<CustomComponent2 ref={props.register('s2')} key={2}>Text2</CustomComponent2>
<ListComponent id={'s1'} key={3}/>
<ListComponent id={'s2'} key={3}/>
</View>
)
}
}
</Parent>
);
}
}
Parent.js
class Parent extends React.Component{
constructor(props) {
super(props);
this.dependencyMap = {}
}
render() {
return (
<View>
{this.props.children({
register: this.register.bind(this)
})}
</View>
);
}
register(dependentOn){
let dependentRef = React.createRef();
if(!this.dependencyMap[dependentOn]){
this.dependencyMap[dependentOn] = [];
}
this.dependencyMap[dependentOn].push(dependentRef);
return dependentRef;
}
animateDependentChildren(listId){
let subscribers = this.dependencyMap[listId];
subscribers.forEach(subscriber => {
console.log('subscriber', subscriber);
console.log('subscriber dom', subscriber.current);
this.refs[subscriber].animate(scrollObj); // <-This function always animates the last of the list of children (ie CustomComponent2)
});
}
}
ここで何が間違っているのか分かりますか?React.createRef を使用して複数の参照を作成し、後で個別に呼び出すことはできませんか?