Question

我的应用程序的背景 - 它是一个ASP 5（＆＃39; vNext＆＃39;，MVC 6）。该项目正在使用Visual Studio 2015集成使用gulp来重新生成我的客户端脚本，使用browserify和gulp。

所以我有一个＆＃39; .jsx＆＃39;带有require stmts的源文件，例如：

var DatePicker = require('react-toolbox/lib/date_picker');
var React = require('react');
var ReactDOM = require('react-dom');

...我通过browserify运行它，一切都按预期解决了。我知道它正在解决，因为如果我将任何require stmts更改为无效的东西，我会看到VS中任务运行器控制台中的browserify错误。我已将所有内容从页面中删除，只是有一个脚本标记，其中包含对我的捆绑应用的引用。

所以它找到了所有的来源。如果我运行一个简单的html页面来引用我的捆绑脚本而没有对DatePicker组件的任何引用，那么它就可以正常加载。

但是，一旦我尝试使用DatePicker组件，我就会收到反应错误：

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of 'Dashboard'.

但是，我在使用＆＃39; DatePicker＆＃39;之前在浏览器中设置了一个断点。组件和重新加载以检查状态，以及＆＃39; DatePicker＆＃39;是一个完全实例化的普通对象，此时脚本可以使用它。我可以检查它，看看它的原型是＆＃39; ReactComponent＆＃39;并且它具有您期望{render，isMounted等}的方法。

所以它根本不是空的。当运行时似乎一切正常时，我无法理解抛出的错误。当然，我担心这可能是我浏览和捆绑的一个功能，但这对我来说是全新的，所以我不确定该尝试甚至尝试。

在捆绑之前，这是我的整个JSX：

var DatePicker = require('react-toolbox/lib/date_picker');
var React = require('react');
var ReactDOM = require('react-dom');


var Dashboard = React.createClass({
   render: function () {
       return (

     <div>
        <DatePicker />
      </div>

     );
   }
});

ReactDOM.render(
   React.createElement(
      Dashboard, {}),
      document.getElementById ("dashReactRoot")
   );

......以及相关的gulp任务：

gulp.task('b-fy-dashboard', function () {
   gulp.src(paths.react + '/Admin/Profile/Dashboard.jsx')
        .pipe(browserify({
           insertGlobals: false,
           bundleExternal: true,
           debug: false,
           transform: [
            ['browserify-css']
           ]
        }))
        .pipe(gulp.dest(paths.webroot + 'js/modules'));
});

...我怎么能够使第三方组件的最基本使用工作？！？！我已经好几个小时了，请分享您的想法或经历。

Answer 1

可能是您没有配置CSS模块。

查看他们的必备文档：

React Toolbox默认使用CSS模块导入样式表   用SASS写的。如果您想要导入组件   与CSS捆绑在一起，您的模块捆绑器应该能够要求这些   SASS模块。

虽然我们推荐使用webpack，但您可以随意使用任何模块   你想要的捆绑包，只要它可以编译并需要SASS文件   位于node_modules中。如果您遇到要求错误，   确保您的配置满足此要求。

我看到您已插入browserify-css，但它看起来不支持CSS模块。我可能在这里错了，我是一个webpack的人，所以我正在努力。

这是Browserify的CSS模块插件： https://github.com/css-modules/css-modulesify

无法在react.js应用程序

1 个答案: