TypeScript：是否可以将接口实例传递给反应组件？答案

【问题标题】：TypeScript: Is it possible to pass an instance of an interface into a react component?TypeScript：是否可以将接口实例传递给反应组件？
【发布时间】：2017-09-27 08:53:12
【问题描述】：

我想在登录时显示一个组件：

import * as React from 'react';
import * as Localization from '../Modules/Localization';
import ILanguageChangedObservor from '../Interfaces/ILanguageChangedObservor';

class Login extends React.Component {

  private observor : ILanguageChangedObservor;

  constructor(languageObservor : ILanguageChangedObservor) {
    super();
    this.observor = languageObservor;
  }

  public currentLanguage : Localization.Localization.LocalizedStrings = new Localization.Localization.LocalizedStrings(navigator.language.split('-')[0].toString());

  public changeBrowserLanguage(event: React.FormEvent<HTMLSelectElement>) {
    this.currentLanguage = new Localization.Localization.LocalizedStrings(event.currentTarget.value);
    this.forceUpdate();
  }

  render() {

    var englishStrings = new Localization.Localization.LocalizedStrings("en");
    var germanStrings = new Localization.Localization.LocalizedStrings("de");
    var frenchStrings = new Localization.Localization.LocalizedStrings("de");
    var spanishStrings = new Localization.Localization.LocalizedStrings("es");

    return (
        <div>
                <p>
                <select onChange={ e => this.changeBrowserLanguage(e) }>
                  <option value="en">{englishStrings.languageInNative}</option>
                  <option value="de">{germanStrings.languageInNative}</option>
                  <option value="fr">{frenchStrings.languageInNative}</option>
                  <option value="es">{spanishStrings.languageInNative}</option>
                </select>
                </p>
                {this.currentLanguage.welcome}<br />
        </div>
    );

  }
}

export default Login;

我想要做的是在登录时设置语言，告诉观察者哪个是父页面：

父屏幕：

import * as React from 'react';
import './App.css';
import Login from './Screens/Login';
import * as Localization from './Modules/Localization';
import ILanguageChangedObservor from './Interfaces/ILanguageChangedObservor';

const logo = require('./logo.svg');

class App extends React.Component implements ILanguageChangedObservor {

  public update(toLanguage : Localization.Localization.LocalizedStrings) {

  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <Login />
      </div>
    );
  }
}

export default App;

我期待我可以将父级的实例传递给登录组件，如下所示：

<Login languageObservor=this />

但这似乎不是一个可用的选项。是否可以至少将回调函数传递给组件？我是新手，所以仍在尝试解决限制。提前感谢您的帮助。

【问题讨论】：

标签： reactjs typescript react-native

【解决方案1】：

您可以将Parent中定义的回调传递给子Login，以便它在确定用户选择的语言时调用。

类似：

class App extends React.Component implements ILanguageChangedObservor {

  public update(toLanguage : Localization.Localization.LocalizedStrings) {
    //Do what needs to be done when language is change in Login
  }

  render() {
    <Login callMeWhenYouGetLang={ this.update } />
  }
}



class Login extends React.Component {
  constructor(props) {
    super(props);
  }

  public changeBrowserLanguage(event: React.FormEvent<HTMLSelectElement>) {
    this.currentLanguage = new Localization.Localization.LocalizedStrings(event.currentTarget.value);
    // vvvvvvvvv
    this.props.callMeWhenYouGetLang(this.currentLanguage);
    // ^^^^^^^^
    this.forceUpdate();

  }
}

在 React 中，将 Component 类的整个实例，甚至它们附带的 DOM 节点传递给子组件是 大禁忌。主要原因是您真的不想遇到组件发生更改的情况，并且您无法弄清楚原因，因为 组件本身没有直接的行动线 .

您还应该查看learning Redux，以帮助您在应用变得越来越复杂时以更易于管理的方式指导您的应用状态。您的登录组件可以确定用户的语言，更改应用程序的全局状态，然后将其反馈到整个应用程序中。这将使您不必担心父回调或将语言传递给每个组件。

最后一件事......你一直在拼写 Observer 错误。 :)

【讨论】：