ReactJS createRef для N компонентов, все указывают на последний в списке - PullRequest
Новая
       5

ReactJS createRef для N компонентов, все указывают на последний в списке

0 голосов
/ 15 ноября 2018

У меня есть 3 компонента: приложение, родитель и ребенок. Приложение использует метод, предоставленный Parent, и регистрирует детей в Parent. Это для Родителя, чтобы собрать Refs (создать карту зависимостей) Дочерних элементов, которые он охватывает.

У потомка есть метод с именем Animate, который будет вызываться Parent через созданные ссылки.

Когда я пытаюсь распечатать карту зависимостей, я вижу, что создается массив, как я и ожидал.

Но когда я пытаюсь получить доступ к дочерним компонентам из Parent с использованием зависимости, он всегда вызывает последний элемент в списке дочерних.

То есть, когда я пытаюсь анимировать , используя animateDependentChildren в Parent.js, CustomComponent2 только анимируется, даже если я передаю правильный идентификатор для CustomComponent1. 

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 для создания нескольких ссылок, а затем вызывать их по отдельности?

1 Ответ

0 голосов
/ 15 ноября 2018

Поскольку подписчик является компонентом ref, попробуйте изменить эту строку: 

this.refs[subscriber].animate(scrollObj);

... в: 

subscriber.animate(scrollObj);

Надеюсь, это поможет.

...