reactjs - Blueprintjs Toast 组件的惯用 React

Question

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

const MyToaster = Toaster.create({options})， 其次是

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

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

Answer 1

在这方面这Toaster是一个有趣的问题，因为它不关心你的 React 生命周期。它的目的是为了响应事件而立即启动 toast。

只需调用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() { ... }
}