无法在反应中包括3-d政党成分

Question

我试图将3D派对组件包括如下：

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文件，而不会出现任何问题，但是3-d方面inlinesvg组件无法工作，并在浏览器javascript控制台中产生以下错误：

未定义的TypeError:无法读取未定义的属性“PropTypes”

此错误是由react inlinesvg.js中的以下代码引起的。

第566项

PropTypes = React.PropTypes;

我很确定我在浏览器化配置中错过了一些重要的东西，但我无法准确地知道我做错了什么。

谢谢你的帮助。

Answer 1

这似乎是一个问题的三维党的组成部分。我是新手，所以为了排除我的配置错误，我使用了100%的工作样板。但问题依然存在。调查显示，模块本身并没有以适当的方式进行进口反应。我最初的问题实际上可以分为两个问题(如何包含该模块以及如何内联加载SVG文件，让我回答问题的第二部分)。我没有找到任何工作模块，可以加载svg，没有任何第三方模块，如jquery或创建我自己的自行车。我想出了一个著名的SVGInjector javascript模块。它是一个普通的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});
    }
}