Как получить ref только при первом создании элемента по ключу?

Question

[Vitaliy]

Как сказано в доке, при обновлении дерева элементов ref будет сначала вызван с null, а потом с тем же HTMLElement.
При условии, что ни ключ, ни HTMLElement не поменялись, мне не нужно, чтобы вызывался ref.

Есть ли встроенная возможностью получать только измененные ref?

Answer 1

[Антон Спирин]

Там сказано совсем не об этом, а о том, что не надо inline functions в ref писать.
Неправильно:

class Example extends React.Component {
  ref;
  
  render() {
    return <div ref={node => this.ref = node} />;
  }
}

В этом случае каждое обновление компонента Example, будет два вызова колбека переданного в ref. Один раз с аргументом null, второй раз с вашим элементом или компонентом.

Правильно:

class Example extends React.Component {
  ref;
  createRef = node => this.ref = node;

  render() {
    return <div ref={this.createRef} />;
  }
}

В этом случае при обновлении Example вызова колбека не будет, так как ссылка на колбек не изменилась.

Comments

[Vitaliy]

мне нужно вызывать коллбэк при получении референса, а не просто записать его в current выделенного объекта.

Так можно было бы сделать через

controlRef = {
        set current(v) {
            console.log(v,)
        }
    }

но тогда у меня нет доступа к свойствам класса

[Vitaliy]

могу конечно в конструкторе через замыкания добраться до const self = this, но это уже похоже на путь к костылям

[Vitaliy]

тем не менее, в скоупе с тегом (у которого ref), мне также нужно получать переменные, но через вариант с сеттером current я никак их туда не проброшу

[Антон Спирин]

Виталий Столяров, забудьте вообще костыли вроде: const self = this
Объясните, что сделать хотите.

[Vitaliy]

Антон Спирин, хочу в коллбэк передать референс на каждый элемент из списка только тогда, когда он создан или по этому же HTMLElement пришел другой ключ. Мне не нужны его null а потом тот же HTMLElement, когда ключ и этот HTMLElement остался прежним

забудьте вообще костыли вроде: const self = this

разумеется, но где другие пути, которые предоставляет React? Похоже, что их нету

[Vitaliy]

Больше похоже на костыль то, что HTMLElement остается прежним, но на него все равно приходит пустой референс при перерендеривании

[Антон Спирин]

Виталий Столяров,

Больше похоже на костыль то, что HTMLElement остается прежним, но на него все равно приходит пустой референс при перерендеривании

В документации черным по белому написано, что не надо передавать колбеком inline функцию. Вы неправильно используете API и получаете null. Прочитайте ответ внимательно.
Если передавать колбек правильно(смотрите пример помеченный Правильно), то колбек будет вызван только при изменении/добавлении элемента/компонента.

разумеется, но где другие пути, которые предоставляет React? Похоже, что их нету

Тут могу предложить получше изучить JavaScript. Для решения подобных проблем class properties, arrow functions или binding в конструкторе с головой. React к данной проблеме вообще никакого отношения не имеет.

[Vitaliy]

Антон Спирин,

что не надо передавать колбеком inline функцию

еще раз повторю, есть необходимость передать переменные из скоупа этого HTMLElement кроме передачи самого референса

То есть, ссылаясь на

You can avoid this by defining the ref callback as a bound method on the class, but note that it shouldn’t matter in most cases.

я напишу ref={this.nonInlineFunction} то в нее я не прокину переменные, допустим item из items.map(item => Тут могу предложить получше изучить JavaScript.

Серьезно? Тогда читайте абзац выше.

React к данной проблеме вообще никакого отношения не имеет.

Здрасте, приехали! Говорю, что не могу вытащить ref вместе с переменными в скоупе при рендеринге (внутри JSX, да-да)

[Vitaliy]

Проще говоря, если не использовать inline функции, то в функции метода я не смогу понять к какому айтему относится от или иной HTMLElement

[Антон Спирин]

Виталий Столяров, тут уже проблема может быть в неправильном подходе к проектированию. Так как вы вместо того чтобы работать с данными, что API библиотеки позволяет и приветствует, работаете с refs. Использовать их без необходимости плохая практика, о чем в документации тоже написано.

Тем ни менее, вашу задачу можно решить с помощью data атрибутов.

[Vitaliy]

Антон Спирин, так себе аргумент, на каждом шаге ссылаться на документацию и думать, что API инструмента предусматривает всевозможные кейсы.

Инстанс класса хранить в data атрибутах? Ну ну

Более хай левел описание: есть страница, которая рендерится Реактом. В ней есть списки, которые предоставляют HTMLElement'ы другим инструментам путем вызова их callback'а. И совсем не хорошо, когда ичего не поменялось, а оно заново отсылает референс

[Антон Спирин]

Виталий Столяров, ну насчет кейсов бесспорно. Есть еще такой прием как innerRef:

class Parent extends React.Component {
  createRef = ({ node, data }) => { /* do something with node and data */ };

  render() {
    return <Child innerRef={this.createRef} />;
  }
}

class Child extends React.Component {
  createRef = node => {
    this.props.innerRef({ node, data: 'data' });
  };

  render() {
    return <div ref={this.createRef} />;
  }
}

Возможно подойдет вам.

Тут даже можно обойтись без innerRef, получать ref элемента в Child, а в Parent получать ref инстанса Child, в котором есть ссылка на элемент. Это если сам инстанс вдруг нужен.

[Vitaliy]

Антон Спирин, в моем случае что-то вроде:

class Child extends React.Component {
  createRef = (node, item) => {
    this.props.innerRef({ node, item });
  };

  render() {
    return items.map(item => <div ref={this.createRef} />);
  }
}

но только в createRef без инлайн функции никак item не прокинуть

[Антон Спирин]

Виталий Столяров, так:

class List extends React.Component {
  createItemRef = ({ node, item }) => { /* do something with node and item */ };

  render() {
    const { items } = this.props;
    
    return items.map(item => (
      <Item key={item.id} innerRef={this.createItemRef} item={item} />
    ));
  }
}

class Item extends React.Component {
  createRef = node => {
    const { innerRef, item } = this.props;

    innerRef({ node, item });
  };

  render() {
    const { item } = this.props;

    return <div ref={this.createRef}>{item.title}</div>;
  }
}

Только что-то мне подсказывает, что, возможно, вы можете работать с библиотекой в самом компоненте элемента списка.

[Vitaliy]

Антон Спирин, спасибо, сейчас попробую

[Vitaliy]

да, работает. Не знаю, можно ли назвать подобного вида замыкание в стиле React - костылем? Вместо одного тега прибавляется целый компонент на классе

[Антон Спирин]

Виталий Столяров, нет, так как это лишь API для получения доступа к DOM элементам или к экземплярам компонентов, не более. Так же, одна из главных концепций React - иммутабельность.
Вы вполне можете передавать свойством ref inline функцию, но тогда все проверки вам придется выполнять самостоятельно, что, на самом деле, тоже не сложно, но гораздо проще применить композицию, создав компонент для элемента списка.