reactjs - react-toolbox 小吃店的任何隐藏事件？

Question

我正在使用react-toolkit Snackbar带有 Redux 的组件。每个snackbar 都被建模为Redux store 中的一个对象。但是我想在每次通知超时或被解除/隐藏时删除这个对象。我如何实现这一目标？

每次添加通知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}
 />