Как использовать Реакт-тостр? - PullRequest
Новая
       10

Как использовать Реакт-тостр?

0 голосов
/ 04 июля 2018

Я пытаюсь использовать один ToastContainer для всех своих компонентов в ReactJS приложении, но не могу понять, как это сделать. Я попробовал: 

let container;

ReactDOM.render(
  <App container={container}>
    <ToasterContainer ref={ref => (container = ref)} />
  </App>,
  document.getElementById("root")
);

Однако я получаю сообщение об ошибке: 

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

У кого-нибудь есть советы, как это сделать?

Я открыт для использования любых других библиотек, которые могут лучше работать с приложением React.

Я должен также упомянуть, что моя цель - иметь возможность отображать тосты из модулей, которые содержат только вспомогательные функции, но сами по себе ничего не отображают. Самая большая проблема, с которой я столкнулся до сих пор с react-toastr, заключается в том, что сначала требуется, чтобы компонент ToasterContainer был отрендерен, чтобы иметь возможность отображать любые тосты. Моим идеальным решением было бы то, что я мог бы создать так: 

let toastr = new Toastr(/* some options */);
toastr.show(message);

1 Ответ

0 голосов
/ 04 июля 2018

Я думаю, что ошибка не с тостером, 

let container;
ReactDOM.render(<App container={container}>

Здесь вы создали, и без инициализации container вы присвоили его контейнеру, поэтому контейнер имеет значение undefined.

Если вы пытаетесь реализовать react-toastify, вам не нужно передавать ссылку, просто добавьте <ToastContainer /> в ваш основной компонент, 

App = () =>(
  //add your routes here
  <ToasterContainer/>
)
ReactDOM.render(
  <App/>,
  document.getElementById("root")
);
...