Question

在我的项目中，有HomeIndexView和表组件。因此，当用户登录到他的帐户时，在HomeIndexView中，它会显示数据库中的所有表。我想要做的是让每个表都有一个状态，以便它改变颜色取决于它的状态（取决于孩子的状态）......我怎么能这样做？

我的表组件的状态如下所示。

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

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

编辑 - 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 React组件中的组件状态，以便您可以检查某些值以不同的方式呈现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>
    );
  }
}

如何让组件的每个子组件都处于状态？反应还原

1 个答案: