Question

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

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组件，如下所示：

<Login languageObservor=this />

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

Answer 1

您可以将父级中定义的回调传递给孩子登录，以便在确定用户选择的语言时进行呼叫。

类似的东西：

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节点传递给子组件。 big no-no 。主要原因是你真的不想进入组件发生变化的情况，你无法弄清楚原因，因为没有直接的行动路线在组件本身。

您还应该调查learning Redux，以便在您的应用程序日益复杂时，以更易于管理的方式指导您应用的状态。您的登录组件可以确定用户的语言，更改应用程序的全局状态，然后在整个应用程序中向下输入。这可以防止您不必担心父回调或将语言传递给每个组件。

最后一件事......你一直在拼错Observer。：）

TypeScript：是否可以将接口实例传递给react组件？

1 个答案: