挂载 browserify 所需的 React 组件

Question

我有一个组件是在第二个文件中编写的，该文件有两个导出，一个 "images" 导出和一个 "modal" 导出。在我的主机文件中，我在 ajax/jquery load 请求的回调期间包含并挂载它们。我的网站结构是这样的，每个负载都由一个实际的静态 url 端点表示（例如，url.com/sub/item 是完全可导航的，但为了在我的用例中获得一些动态乐趣，我加载它们在 url.com 上包装成提供 ajax 的作品 - 这更多是对 "can I do it" 的测试 - 更少 "do I need to."

这些组件在静态页面上独立运行效果很好。在加载的页面上 - 图片有效，但另一个（模态）使整个聚会崩溃。

这是我遇到的控制台错误

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).
Warning: Only functions or strings can be mounted as React components.

我是这样解决问题的child:

if ($('.modal-images').length){
 $('body').append('<section id="modal-loader"></section>');
  // This breaks stuff like a drunk bull in the chicken coup.
   React.render(<Modal />, document.getElementById('modal-loader'));
}

这是整个派对的背景：
https://gist.github.com/motleydev/d763ebf6a9116ed05ea6

Answer 1

发生的事情是，在某个时候，您的 <Component/> 之一正在使用组件 undefined。我会确保 Modal 作为您期望的值实际存在于文件中。

Answer 2

我明白了 - 由于我在我的包含文件中执行条件渲染逻辑，因此模态框被封装在一个 if 检查中。基本上 - 我需要一段不存在的代码，因为在查看动态页面时 if 检查为假。条件中没有包装 class 定义。

挂载 browserify 所需的 React 组件

Mounting a React component that was required with browserify

jquery

reactjs

browserify

react-jsx