Как сделать, чтобы каждый дочерний компонент имел состояние? react redux

Question

В моем проекте есть компонент HomeIndexView и table. Таким образом, когда пользователь входит в свою учетную запись, в HomeIndexView он отображает все таблицы в базе данных. Я хочу, чтобы каждая таблица имела состояние, чтобы он менял цвет, зависит от его состояния (зависит от состояния ребенка) ... Как я могу это сделать?

У моего настольного компонента есть состояние, как показано ниже.

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

состоянием вы поделились выше является частью глобального состояния (где tableReducer), а не состояние таблицы , так что вам нужно, чтобы инициализировать состояние компонента в Table Реагировать компонент, так что вы можете проверить некоторые значения, чтобы сделать CSS иначе что-то вроде этого:

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