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组件的惯用法

2 个答案: