如何通过 i18next 从 hoc 翻译组件中检索 ref

Question

我使用 i18next 在单独的 repo 中翻译我的组件。现在我需要在我的主项目中使用一个组件中的方法。 这是示例组件：

class ExampleComponent extends React.Component {
  constructor(props) {
    this.state = {
      text: '',
    };
    this.resetText = this.resetText.bind(this);
  }

  resetText() {
    this.setState({
    text: '',
    });
  }

  render() {
    <div/>
  }

export default translate('components', { withRef: true })(ExampleComponent);

现在我需要在我的主项目中使用 resetText，没有翻译它可以正常工作

class MainComponent extends Component {

  resetComponent() {
    return () => this.exampleComponent.resetText();
  }

  renderExampleComponent() {
    return (
      <ExampleComponent
        ref={(exampleComponent) => { this.exampleComponent = exampleComponent; }}
      />
    );
  }

  render() {
    return (
      <div>
        {this.resetComponent()}
      </div>
    );
  }

我试过 this.refs.exampleComponent.resetText();但它不起作用。 在 i18next 文档中，我发现“withRef | 将引用存储到包装的组件并通过 decoratedComponent.getWrappedInstance(); 访问它”但是我应该在哪里使用这个 getWrappedInstance() 让它工作？ 有人有这方面的经验吗？

问候

Answer 1

我认为使用提供的代码，您的 ref 返回一个包装器，因此您需要对其调用 getWrappedInstance：this.refs.exampleComponent.getWrappedInstance().resetText();