無法在我的react.js應用程序中使用react-toolbox組件

我的應用程序背景 - 它是一個ASP 5（'vNext'，MVC 6）。該項目使用Visual Studio 2015，集成使用gulp來重新生成我的客戶端腳本，使用browserify和gulp。無法在我的react.js應用程序中使用react-toolbox組件

所以我有一個「.jsx」源文件，需要撐條，如：

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

...我通過browserify運行它，並預期一切都解決了。我知道它的解決方案，因爲如果我將任何require stmts更改爲無效，我會在VS中的任務運行器控制檯中看到browserify錯誤。我已將所有內容全部刪除，並且只有一個腳本標記以及對我的捆綁應用程序的引用。

所以它找到所有的來源OK。如果我運行了一個簡單的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'.

不過，我只是使用了「的DatePicker」之前設置在瀏覽器中的斷點組件並重新加載以檢查狀態，'DatePicker'是此時腳本可用的完全實例化的普通對象。我可以檢查它，看看它的原型是'ReactComponent'，它具有你期望它的{render，isMounted等}的方法。

所以它不是空的。如果在運行時看起來好像一切正常，我無法理解所引發的錯誤。當然，我擔心這可能是我瀏覽和捆綁的功能，但這對我來說都是新的，所以我不確定甚至要嘗試什麼。

這裏是我的整個JSX srouce綁定前：

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.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')); 
});

...怎麼回事，我不能讓連最基本的第三方組件的使用工作？！？！我已經呆了好幾個小時了，請分享你的想法或經驗。

來源

2016-06-12 user2403744

可能是因爲您沒有配置CSS模塊。

見他們的先決條件文檔：

React Toolbox uses CSS Modules by default to import stylesheets written in SASS. In case you want to import the components already bundled with CSS, your module bundler should be able to require these SASS modules.

Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require SASS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

我看到你有browserify-css插上，但它並不像它支持CSS模塊。雖然我可能在這裏錯了，但我是一個網絡包裝的人，所以我正在刺探這一點。

這裏是一個Browserify CSS模塊插件： https://github.com/css-modules/css-modulesify

來源

2016-06-12 20:12:42 ctrlplusb

我非常欣賞的領先優勢。我會調查你的鏈接和信息。粗略地說，切換到webpack需要付出多少努力？它是否與gulp整合？並且我還必須切換到ECMA 6/TypeScript語法？我可以看到切換到webpack，如果我真的需要做的是改變我的gulpfile有點，但不是如果我需要改變我已經寫了幾十個源文件。 – user2403744

這是一個非常大的開關。爲了您的項目進展，我不會推薦。在提交之前，請花一些空閒時間來學習概念。 SurviveJS有一個[很好的一系列課程]（https://survivejs.com/） - 我首先從他們身上學到了東西。 Kent C. Dodds也將發行新的egghead系列，敬請期待。試一下，一旦你征服了核心概念，它就超級強大。 – ctrlplusb

無法在我的react.js應用程序中使用react-toolbox組件

回答

相關問題