无法在 React 中包含 3-d 派对组件

Question

我正在尝试将 3-d 派对 component 包括在内，如下所示：

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}]
    ]
  }

最后是gulp任务配置：

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 party inlinesvg 组件不起作用并在浏览器 javascript 控制台中产生以下错误：

Uncaught TypeError: Cannot read property 'PropTypes' of undefined

错误是react-inlinesvg.js

中的以下代码引起的

第 566 行
PropTypes = React.PropTypes;

我很确定我在 browserify 配置中遗漏了一些重要的东西，但无法弄清楚我到底做错了什么。

感谢您的帮助。

Answer 1

这似乎是 3-d 派对组件的问题。我是 React 的新手，所以为了排除我的配置错误，我使用了 100% 的工作样板。但问题依然存在。调查显示模块本身没有以正确的方式导入 React。我最初的问题实际上可以分为 2 个问题（如何包含该模块以及如何内联加载 SVG 文件，所以让我回答问题的第二部分）。我没有找到任何 working 模块可以加载 svg 而无需像 jquery 这样的任何 3-d 派对模块或创建我自己的自行车。我想出了众所周知的SVGInjector javascript module。它是一个普通的 js 模块，但具有必要的 browserify 支持。我毫无问题地将它包装到 React 组件中。这是代码：

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

无法在 React 中包含 3-d 派对组件

Unable to include 3-d party component in React

javascript

reactjs

gulp

browserify