TypeScript：是否可以將接口的實例傳遞給反應組件？

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 languageObservor=this /> 

但似乎這不是一個可用的選項。是否有可能至少將一個回調函數傳遞給一個組件？即時通訊新的反應，所以仍然試圖解決侷限性。感謝您的幫助提前。

Answer 1

您可以將Parent中定義的回調傳遞給子進程登錄，以便在確定用戶選擇的語言時進行調用。

喜歡的東西：

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

    } 
} 

有了反應，通過組件類，甚至他們隨行的DOM節點的整體情況爲孩子組件是大禁忌。主要原因是您真的不想進入組件發生更改的情況，並且您無法找出原因，因爲組件本身沒有直接行動。

您還應該考慮learning Redux，以便在應用程序變得越來越複雜時以更易於管理的方式幫助指導應用程序的狀態。您的登錄組件可以確定用戶的語言，更改應用程序的全局狀態，然後在整個應用程序中反饋該狀態。這可以防止您擔心父回調或將語言傳遞給每個組件。

最後一件事......你一直在拼寫Observer錯誤。 :)