Question

我在Redux中使用react-toolkit Snackbar组件。每个小吃店都被建模为Redux商店中的一个对象。但是我想在每次通知超时或被解除/隐藏时删除此对象。我怎么做到这一点？

每次添加通知时，是否需要手动将onTimeout设置为dispatch？

如果是这样，有没有办法在中央位置添加此调度，而不是在我发送此操作的任何地方添加它？

Answer 1

可以在这里使用更高阶的组件。

<强> SnackbarWrapper.js

import React from 'react';
import PropTypes from 'prop-types';

const SnackbarWrapper = (Component) => {
  class Decorated extends React.Component {
    constructor(props, context) {
      super(props, context);
      this.state = {
        active: props.active
      };
      this.handleSnackbarClick = this.handleSnackbarClick.bind(this);
      this.handleSnackbarTimeout = this.handleSnackbarTimeout.bind(this);
    }
    componentWillReceiveProps(nextProps) {
      // snackbar activated from outside
      if (this.props.active !== nextProps.active) {
        this.setState({ active: true });
      }
    }
    handleSnackbarClick(event, instance) {
      // snackbar dismissed from inside
      this.setState({ active: false });
      // handle the dispatch in callback function
      this.props.cb();
    }
    handleSnackbarTimeout(event, instance) {
      // snackbar dismissed from inside
      this.setState({ active: false });
      // handle the dispatch in callback function
      this.props.cb();
    }
    render() {
      const { action, label, type, timeout } = this.props;
      return (
        <Component
          action={action}
          label={label}
          type={type}
          timeout={timeout}
          active={this.state.active}
          onClick={this.handleSnackbarClick}
          onTimeout={this.handleSnackbarTimeout}
        />
      );
    }
  }

  Decorated.propTypes = {
    action: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    timeout: PropTypes.number.isRequired,
    cb: PropTypes.func.isRequired,
    active: PropTypes.bool.isRequired
  };

  return Decorated;
};

export default SnackbarWrapper;

您组件中的

import SnackbarWrapper from './SnackBarWrapper';
const RTSnackbar = SnackbarWrapper(Snackbar);
...
<RTSnackbar
  action="Dismiss"
  label="Snackbar action cancel"
  type="cancel"
  timeout={2000}
  cb={this.actionCb}
  active={this.state.active}
 />

react-toolbox snackbar的任何隐藏事件？

1 个答案: