Question

我正在React中构建一个应用程序，该应用程序具有有关某些文件的图形以及包含该文件详细信息的扩展面板（材料UI）。我想使用redux根据图中的点击切换扩展面板。我应该怎么做。

我有以下工作单击将触发一个动作，并将一个道具发送到扩展面板列表，其中包含要扩展的文件的名称。有没有办法找到具有该文件名的扩展列表并将其扩展（设置为true）

Graph.js

       <BarChart
          barCategoryGap={0}
          layout="vertical"
          data={this.state.data}
          margin={{ top: 5, right: 10, left: 100, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <YAxis type="category" dataKey="name" />
          <XAxis type="number" />
          <Tooltip  />
          <Legend />
          <Bar onClick={this.props.barClicked} isAnimationActive={true} barSize={10} dataKey="High" stackId="a" fill="#8884d8" />
          <Bar onClick={this.props.barClicked} isAnimationActive={true} barSize={10} dataKey="Low" stackId="a" fill="#82ca9d" />
        </BarChart>

//Code Omitted

GraphList.propTypes = {
 barClicked:PropTypes.func,
 };

export function mapDispatchToProps(dispatch) {
 return {
   barClicked: evt => dispatch(barClicked(evt.name)),   
 };

}

reducer.js

    import { fromJS } from 'immutable';

    import { SHOW_CRITICAL, CRITICAL_LOADED, BAR_CLICKED } from './constants';

    // The initial state of the App
    export const initialState = fromJS({
      criticalVisibility: false,
      criticalLoading: false,
      filesClicked: ""
    });

    function homeReducer(state = initialState, action) {
      switch (action.type) {
        case SHOW_CRITICAL:
          console.log(state.get('criticalLoading'))
          return state
            .set('criticalVisibility', !state.get('criticalVisibility'))
            .set('criticalLoading', true)
        case CRITICAL_LOADED:
          return state.set('criticalLoading', false)
        case BAR_CLICKED:
          console.log(state.get('filesClicked'))
          return state
            .set('filesClicked', action.file)

        default:
          return state;
      }
    }

    export default homeReducer;

ExpansionList.js

        render() {
        return (

          <div style={mainDiv}>
            <div style={headingDiv}>
              <Typography style={{ color: '#FFFFFF' }} align={"Left"} component={"subtitle1"}>Files</Typography>
            </div>

            {Object.entries(this.state.data).map(([file, array]) => {
              return (
                <ExpansionPanel expanded={this.expandedControl(file)}>
                  <ExpansionPanelSummary>
                    <Typography >{file}</Typography>
                  </ExpansionPanelSummary>
                  <ExpansionPanelDetails>
                    <Typography>
                      <SimpleTable data={array} />
                    </Typography>
                  </ExpansionPanelDetails>
                </ExpansionPanel>
              )
            })}
          </div>

        );
      }
    }

    const mapStateToProps = createStructuredSelector({
      filesClicked: selectFilesClicked(),
    });

    const withReducer = injectReducer({ key: 'home', reducer });
    const withSaga = injectSaga({ key: 'home', saga });

    const withConnect = connect(
      mapStateToProps,
    );

    export default compose(
      withReducer,
      withSaga,
      withConnect,
    )(ExpansionList);

ExpansionList可以正确接收带有刚刚单击的文件名的prop FilesClicked。我该如何扩展相应的卡。

如何显示带有Redux的单击文件的详细信息？

0 个答案: