Question

我正在尝试为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);

Answer 1

我认为错误不在于烤面包机部分

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

您已在此处创建且未初始化container，但已将其分配给容器，因此容器的值未定义。

如果您尝试实现react-toastify，则不需要传递引用，只需在您的主要组件中添加<ToastContainer />，

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

如何使用react-toastr？

1 个答案: