Question

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

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>
    );
  }

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

问候

Answer 1

我认为使用提供的代码，你的ref返回一个包装器，所以你需要在其上调用getWrappedInstance：this.refs.exampleComponent.getWrappedInstance().resetText();

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

1 个答案: