Blueprintjs Toast 组件的惯用 React

Question

Blueprint UI 库提供了一个 Toaster 组件，用于显示用户操作的通知。从文档中，它是通过首先调用

const MyToaster = Toaster.create({options})，后面是

MyToaster.show({message: 'some message'}).

我无法将 show 方法融入 React 的生命周期 - 我如何创建一个可重用的烤面包机组件，它会在不同的按钮点击时显示不同的消息？如果有帮助，我正在使用 MobX 作为数据存储。

Answer 1

Toaster 在这方面很有趣，因为它不关心您的 React 生命周期。它旨在强制性地用于响应事件立即触发祝酒词。

只需在相关事件处理程序中调用 toaster.show()（无论是 DOM 单击还是 Redux 操作）。

在示例中查看我们是如何做到的：toastExample.tsx

Answer 2

我的 Redux 解决方案（和 redux-actions）...

操作：

export const setToaster = createAction('SET_TOASTER');

减速器：

const initialState = {
  toaster: {
    message: ''
  }
};

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'SET_TOASTER':
      return {
        ...state, 
        toaster: { ...state.toaster, ...action.payload }
      };
  };
}

烤面包机组件：

// not showing imports here...

class MyToaster extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // set default toaster props here like intent, position, etc.
      // or pass them in as props from redux state
      message: '',
      show: false
    };
  }

  componentDidMount() {
    this.toaster = Toaster.create(this.state);
  }

  componentWillReceiveProps(nextProps) {
    // if we receive a new message prop 
    // and the toaster isn't visible then show it
    if (nextProps.message && !this.state.show) {
      this.setState({ show: true });
    }
  }

  componentDidUpdate() {
    if (this.state.show) {
      this.showToaster();
    }
  }

  resetToaster = () => {
    this.setState({ show: false });

    // call redux action to set message to empty
    this.props.setToaster({ message: '' });
  }

  showToaster = () => {
    const options = { ...this.state, ...this.props };

    if (this.toaster) {
      this.resetToaster();
      this.toaster.show(options);
    }
  }

  render() {
    // this component never renders anything
    return null;
  }
}

应用程序组件：

或者无论您的根级组件是什么...

const App = (props) =>
  <div>
    <MyToaster {...props.toaster} setToaster={props.actions.setToaster} />
  </div>

一些其他组件：

你需要调用烤面包机的地方...

class MyOtherComponent extends Component {
  handleSomething = () => {
    // We need to show a toaster!
    this.props.actions.setToaster({
      message: 'Hello World!'
    });
  }

  render() { ... }
}

Blueprintjs Toast 组件的惯用 React

Idiomatic React for Blueprintjs Toast component

idioms

reactjs

blueprintjs