如何通过 i18next 从临时翻译的组件中检索 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 | store a ref to the wrapped component and access it by decoratedComponent.getWrappedInstance();" 但是我应该在哪里使用这个 getWrappedInstance() 来让它工作？有人有这方面的经验吗？

问候

Answer 1

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

如何通过 i18next 从临时翻译的组件中检索 ref

How to retrieve ref from hoc translated component by i18next

javascript

i18next

reactjs

react-i18next