ReactJS Komponente Entscheidung Requisiten oder Zustand verwenden zu machen

Question

Ich habe ein Kind Komponente Tabelle, dass jedes Mal seine Zustandsänderungen gemacht werden muss, sondern auch, manchmal, wenn neue Requisiten aus dem übergeordneten ankommen;

Die Tabelle Komponente soll wiederverwendbar sein und behandelt seinen eigenen Zustand. Wenn sich die Breite ändert, benutze ich setState (newTableWidth), um die Tabelle neu zu rendern (so weit, so gut).

Die Mutter app Projekt ist derjenige, der die Tabelle Komponente erstellt und passiert Anfangsbreite.

Das Problem: Nach Änderungen in der übergeordneten App (oder in verschiedenen Unterkomponenten), ich mag den props.tableWidth aktualisieren und neu rendern Tabelle. Aber es gibt andere Szenarien, in denen Projekt rendert Tabelle ohne Aktualisierung der props.tableWidth.

Wie kann Tabelle wissen, wann sich mit den Requisiten zu rendern und wann selbst mit dem Zustand zu rendern?

Code-Beispiel:

class Table extends React.Component { 
    constructor(props) { 
     this.state = { 
      tableWidth: this.props.tableWidth 
      columnOrder 
     }; 
    } 
    onWidthChange(newWidth){ 
    this.setState({tableWidth:newWidth}) 
    } 

} 

class Project extends React.Component { 
render(){ 
    if (this.onChangeTableWidth()){ 
     let width = this.calculateTableWidth(); 
    } 
    <Table tableWidth = {width}/> 
} 
} 

Answer 1

reagieren wird automatisch machen wieder, wenn Requisiten oder Zustandsänderungen, so dass Sie sich darüber keine Sorgen. Sie können die Lifecycle-Methode componentWillReceiveProps(nextProps) verwenden, um Ihren Status mit der neuen über Props empfangenen Breite zu aktualisieren. Verwenden Sie dazu einfach setState(...).

Answer 2

Wenn sich die übergeordnete Komponente dafür entscheidet, neue Requisiten in die untergeordnete Komponente zu übernehmen, muss die untergeordnete Komponente übernommen werden. Wenn es Konflikte zwischen Requisiten und Staat gibt, gewinnen Requisiten und der Staat muss zurückgesetzt werden. Ich vermute, dass ein globaler Zustand dieses Problem gelöst hat, aber ich verstehe aus Ihrer Frage, dass Sie einige Zustände in Unterkomponenten einkapseln. Wenn also die Elternkomponente Requisiten mit Requisiten, die die aktuellen Unterkomponenten enthalten, bringen möchte, kann sie die Unterkomponente fragen und die Requisiten umformen.