Blueprintjs Toast组件的惯用反应

Question

Blueprint库提供了一个烤面包机组件，该组件显示用户操作的通知。从文档中，它被第一次调用使用

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

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

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

Answer 1

在这方面，Toaster很有趣，因为它不关心您的反应生命周期。这意味着，它是必要的使用，以发出祝酒词，立即响应事件。

只需在相关事件处理程序中调用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() { ... }
}