Как сохранить ссылки, когда компонент экспортируется через функцию? - PullRequest
Новая
       11

Как сохранить ссылки, когда компонент экспортируется через функцию?

0 голосов
/ 18 сентября 2018

Документация описывает, как добавить ссылку на компонент класса при использовании ReactJS версии 16.3+.

Вот упрощенный и рабочий пример с использованием двух файлов:

Файл MyForm.js: 

import React, { Component } from 'react';
import MyInput from "./MyInput";

class MyForm extends Component {
  constructor(props) {
    super(props);

    this.myInput = React.createRef();
    this.onClick = this.onClick.bind(this);
  }

  onClick(){
    console.log(this.myInput.current.isValid());
  }

  render() {
    return (
      <div>
        <MyInput ref={this.myInput} />
        <button onClick={this.onClick}>Verify form</button>
      </div>
    );
  }
}

export default MyForm;

Файл MyInput.js

import React, { Component } from 'react';

class MyInput extends Component {

  isValid(){
    return true;
  }

  render() {
    return (
      <div>
        Name :
        <input type="text" />
      </div>
    );
  }
}

export default MyInput;

Работает нормально, консоль отображает true, когда я нажимаю кнопку MyForm.Но как только я добавляю функцию непосредственно перед экспортом моего компонента, появляются ошибки.Например, я добавляю перевод через файл activ-i18n

MyInput.js с экспортом с использованием функции 

class MyInput extends Component {

  isValid(){
    return true;
  }

  render() {
    const {t} = this.props; 
    return (
      <div>
        {t("Name")}
        <input type="text" />
      </div>
    );
  }
}

export default translate()(MyInput); // <=== This line is changing

Теперь, когда я нажимаю на кнопку,выдается ошибка:

TypeError: this.myInput.current.isValid не является функцией

Ошибка исчезает при удалении translate() в последней строке.

Я понял, что ссылка была уничтожена новым компонентом, возвращаемым функцией перевода.Это HOC.Я прочитал главу Пересылка ссылок , но я не понимаю, как пересылать ссылку на компонент, возвращаемый функцией translate ().

У меня возникает эта проблема, как только я использую translate из activti18следующий и с результатом функции connect из redux

Я нашел решение с использованием onRef props и ComponentDidMount, но некоторыеАвторы считают, что это антипаттерн, и я бы хотел этого избежать.

Есть ли способ создать оболочку, которая перехватывает результат HOC для translate () или connect () и добавляет ref к этому результату HOC?

...