無法包括3-d方組件在陣營

我想包括3-d方component如下：無法包括3-d方組件在陣營

app.js 

/** @jsx React.DOM */ 

var React = require('react'), 
    ReactDOM = require('react-dom'); 
    Isvg = require('react-inlinesvg'); 

ReactDOM.render(
    <Isvg src="images/mobile.svg" />, 
    document.getElementById('mobile') 
);

的package.json：

... 
"browser": { 
     "react": "./node_modules/react/dist/react.js", 
     "react-dom": "./node_modules/react-dom/dist/react-dom.js", 
     "react-inlinesvg": "./bower_components/react-inlinesvg/standalone/react-inlinesvg.js", 
     "react-lazyload": "./node_modules/react-lazy-load/dist/LazyLoad.js" 
    }, 
    "browserify": { 
    "transform": [ 
     ["reactify", {"es6": true}] 
    ] 
    }

最後一飲而盡任務配置：

var gulp = require('gulp'), 
    config = require('../config')(), 
    utils = require('../utils'), 
    plugins = require('gulp-load-plugins')({lazy: true}), 
    browserify = require('browserify'), 
    source = require('vinyl-source-stream'), 
    reactify = require('reactify'), 
    watchify = require('watchify'); 

gulp.task('make-js', function() { 
    var options = { 
     debug: true, 
     entries: config.js, 
     transform: [reactify], 
     cache: {}, packageCache: {}, fullPaths: true 
    }, 
    bundler = watchify(browserify(options)); 
    bundler.on('update', rebundle); 

    function rebundle() { 
     utils.log('start bundling...'); 

     bundler 
      .bundle() 
      .on('error', utils.handleErrors) 
      .pipe(source('bundle.js')) 
      .pipe(gulp.dest(config.tmp)); 

     utils.log('finished bundling...'); 
    } 

    return rebundle(); 
});

這創建bundle.js文件時沒有任何問題，但是三維方inlinesvg組件d OES不工作，並且在瀏覽器產生以下錯誤JavaScript控制檯：

Uncaught TypeError: Cannot read property 'PropTypes' of undefined

該錯誤是由下面的代碼在反應-inlinesvg.js

線566
PropTypes = React.PropTypes;

I」引起的m非常確定我在browserify配置中漏掉了一些重要的東西，但無法確切知道我做錯了什麼。

感謝您的幫助。

來源

2015-12-01 Sray

這似乎是這個3D派對組件的問題。我是新手，所以爲了排除我使用100％工作樣板的配置錯誤。但問題依然存在。調查顯示模塊本身不會以正確的方式導入React。我原來的問題實際上可以分成2個問題（如何包含該模塊以及如何加載內聯SVG文件，讓我回答我的問題的第二部分）。我沒有找到任何工作模塊，可以加載svg沒有任何3-party模塊像jquery或創建我自己的自行車。我想出了着名的SVGInjector javascript module。這是一個香草js模塊，但有必要的瀏覽支持。我把它包裝成反應組件沒有問題。這裏是代碼：

class svg extends React.Component { 
    componentDidMount(){ 
     return SVGInjector([ReactDOM.findDOMNode(this)]); 
    } 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return React.DOM.img({ 
       className: this.props.className, 
       'data-src': this.props.path, 
       'data-fallback': this.props.fallbackPath}); 
    } 
}

來源

2015-12-02 08:10:03 Sray

無法包括3-d方組件在陣營

回答

相關問題