Wie kann ich jedem Kind der Komponente einen Zustand geben? react redux

Question

In meinem Projekt gibt es HomeIndexView und Tabellenkomponente. Wenn sich ein Benutzer in HomeIndexView bei seinem Konto anmeldet, werden alle Tabellen in der Datenbank angezeigt. Was ich tun möchte ist, dass jede Tabelle einen Zustand hat, so dass sie die Farbe ändert abhängig von ihrem Zustand (abhängig vom Zustand des Kindes) ... Wie kann ich das tun?

Meine Tabellenkomponente hat einen Zustand wie unten.

const initialState = { 
allTables: [], 
showForm: false, 
fetching: true, 
formErrors: null, 
}; 

EDIT --- 1

HomeIndexView

class HomeIndexView extends React.Component { 
componentDidMount() { 
setDocumentTitle('Table_show'); 
} 

componentWillunmount() { 
this.props.dispatch(Actions.reset()); 
} 

_renderAllTables() { 
const { fetching } = this.props; 

let content = false; 

if(!fetching) { 
    content = (
    <div className="tables-wrapper"> 
     {::this._renderTables(this.props.tables.allTables)} 
    </div> 
    ); 
    } 

return (
    <section> 
    <header className="view-header"> 
     <h3>All Tables</h3> 
    </header> 
    {content} 
    </section> 
); 
} 


_renderTables(tables) { 
    return tables.map((table) => { 
     return <Table 
      key={table.id} 
      dispatch={this.props.dispatch} 
      {...table} />;    
    }); 
    } 

render() { 
    return (
    <div className="view-container tables index"> 
    {::this._renderAllTables()} 
    </div> 
); 
} 
} 

EDIT - 2

_handleClick() { 

    const { dispatch } = this.props; 

    const data = { 
     table_id: this.props.id, 

    }; 

    if (this.props.current_order == null) { 

     dispatch(Actions.create(data)); 

     Object.assign({}, this.state, { 
      tableBusy: true 
     }); 
    } 

    else{ 

     this.props.dispatch(push(`/orders/${this.props.current_order}`)); 
    } 
} 

Answer 1

Der Zustand, den Sie oben geteilt ist Teil des globalen Zustand (wo tableReducer verwenden) nicht den Komponenten-Status der Tabelle, also was Sie brauchen, ist zu Komponente Zustand in Table zu initialisieren Reagieren Komponente, so dass Sie einige Werte überprüfen CSS anders, so etwas zu machen:

import React from "react"; 

class TableComponent extends React.Component { 

    componentWillMount() { 
    this.setInitialState(); 
    } 

    setInitialState() { 
    this.setState({ isWhatever: false }); 
    } 

    render() { 
    return (
     <div> 
     <h1 classname={this.state.isWhatever ? 'css-class' : 'another-class'}> 
      {this.props.id} 
     </h1> 
     </div> 
    ); 
    } 
}