Библиотека пользовательского интерфейса Blueprint предоставляет компонент Toaster, который отображает уведомление о действиях пользователя. Из документации он используется при первом вызове

const MyToaster = Toaster.create({options}), за которым следует

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

У меня возникли проблемы с внедрением метода show в жизненный цикл React - как мне создать повторно используемый компонент тостера, который будет отображать разные сообщения при разных нажатиях кнопок? Если это поможет, я использую MobX в качестве хранилища данных.

1
plod 27 Ноя 2016 в 07:08

2 ответа

Лучший ответ

Toaster в этом отношении забавен, потому что он не заботится о вашем жизненном цикле React. Он предназначен для использования в обязательном порядке для немедленного запуска тостов в ответ на события.

Просто вызовите toaster.show() в соответствующем обработчике событий (будь то клик DOM или действие Redux).

Посмотрите, как мы это делаем, в самом примере: toastExample.tsx

1
Gilad Gray 6 Дек 2016 в 01:17

Мое решение с 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() { ... }
}
0
jdub 2 Фев 2017 в 09:24