Mein Code kann verschachtelte Komponente nicht aktualisieren

Question

Ich versuche Reagieren und reagieren-Typist.

Ich habe ein Problem. Dann gebe ich eine Schließung, die den Zustand zu "onTypingDone" ändern und es aufgerufen, aber nicht richtig funktioniert. Ich denke, weil Typist innere Komponenten nicht neu rendern kann. Zum Beispiel der folgende Code. Der folgende Code funktioniert nicht gut.

Wie kann ich richtig arbeiten?

import * as React from 'react'; 
import Typist from 'react-typist'; 

export interface Props {} 
export interface State { 
    className: string 
} 

export MyComponents extends React.Component<Props, State> { 
    constructor(props: Props) 
    { 
     super(props); 
     this.state = { className: "before" }; 
    } 

    switch() { 
     this.setState({ className: "after" }); 
    } 

    render() 
    { 
     <Typist onTypingDone={this.switch.bind(this)}> 
      <div className={this.state.className}> 
       <p>Hello.</p> 
      </div> 
     </Typist> 
    } 
} 

Answer 1

Als ich in den Code tauchen fanden das eigentliche Problem ist Typist die Wieder machen,

this.state.className das MyComponents zeigt stoppen, Aber Inhalte innerhalb Typist nicht wieder Rendering, Reason ist shouldComponentUpdate Funktion innerhalb Typist Komponente

shouldComponentUpdate(nextProps, nextState) { 
    if (nextState.textLines.length !== this.state.textLines.length) { 
     return true; 
    } 
    for (let idx = 0; idx < nextState.textLines.length; idx++) { 
     const line = this.state.textLines[idx]; 
     const nextLine = nextState.textLines[idx]; 
      if (line !== nextLine) { 
       return true; 
      } 
    } 
    return this.state.isDone !== nextState.isDone; 
} 

shouldComponentUpdate:

render() wird nicht aufgerufen, wenn sollteComponentUpdate() false zurückgeben.

Sie können die Lösung auf diese Weise erreichen:

<div className={this.state.className}> 
    <Typist onTypingDone={this.switch.bind(this)}> 
      <p>Hello.</p> 
    </Typist> 
</div>