Question

我曾经用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);

然后返回错误：无法为函数组件提供引用。

方法不能在<Child />标记中使用ref。添加i18next后有什么方法可以调用子功能？

Answer 1

这是一个问题，因为withTranslation HOC正在使用功能组件。通过使用HOC包装Child组件，实际上是将引用放置在withTranslation组件上（默认情况下）。

有多种方法可以解决此问题，这是最简单的两种方法：

使用withRef: true> = v10.6.0

React-i18n具有一个内置选项，可将引用转发到您自己的组件。您可以使用HOC definition中的withRef: true选项启用此功能：

export default withTranslation({ withRef: true })(Child);

使用命名的道具代理裁判

代替使用<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);

使用i18next反应在父级中调用子级函数

1 个答案: