Вызов дочерней функции в родительском с помощью i18next react

Я использовал React.createRef() для вызова дочернего метода, вот так

import Child from 'child';    

class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.getAlert();
  };

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.onClick}>Click</button>
      </div>
    );
  }
}

Такой детский класс

    export default class Child extends Component {
      getAlert() {
        alert('getAlert from Child');
      }
    
      render() {
        return <h1>Hello</h1>;
      }
    }

Это работает хорошо. Но когда я хочу использовать i18next для перевода дочернего компонента, мне нужно добавить withTranslation(), чтобы использовать HOC.

import { useTranslation } from 'react-i18next';
class Child extends Component {
      getAlert() {
        alert('getAlert from Child');
      }
    
      render() {
        const { t } = this.props;
        return <h1>{t('Hello')}</h1>;
     }

    }
export default withTranslation()(Child);

Затем верните ошибку: функциональным компонентам нельзя дать ссылки.

Средство не может использовать ref в теге <Child />. Есть ли способ вызвать дочернюю функцию после добавления i18next?


reactjs react-i18next
person Nastia    schedule 29.09.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это проблема, поскольку withTranslation HOC использует функциональный компонент. Оборачивая ваш Child компонент HOC, вы, по сути, размещаете ссылку на withTranslation компонент (по умолчанию).

Есть несколько способов решить эту проблему, вот два самых простых:

  1. Использование withRef: true ›= v10.6.0

React-i18n имеет встроенную опцию для пересылки ссылки на ваш собственный компонент. Вы можете включить это, используя параметр withRef: true в определение HOC:

export default withTranslation({ withRef: true })(Child);
  1. Прокси-сервер ссылки с помощью именованной опоры

Вместо использования <Child ref={this.child} /> выберите другую опору для пересылки ссылки на правильный компонент. Однако есть одна проблема: вы хотите, чтобы ссылка содержала экземпляр компонента, поэтому вам нужно будет назначить ссылку вручную в методах жизненного цикла.

import Child from 'child';    

class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.getAlert();
  };

  render() {
    return (
      <div>
        <Child innerRef={this.child} />
        <button onClick={this.onClick}>Click</button>
      </div>
    );
  }
}

import { useTranslation } from 'react-i18next';
class Child extends Component {
      componentDidMount() {
        this.props.innerRef.current = this;
      }

      componentWillUnmount() {
        this.props.innerRef.current = null;
      }

      getAlert() {
        alert('getAlert from Child');
      }
    
      render() {
        const { t } = this.props;
        return <h1>{t('Hello')}</h1>;
     }

    }

export default withTranslation()(Child);
person Chris    schedule 29.09.2020