无法在 React 中包含 3-d 派对组件
Unable to include 3-d party component in React
我正在尝试将 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 配置中遗漏了一些重要的东西,但无法弄清楚我到底做错了什么。
感谢您的帮助。
这似乎是 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});
}
}
我正在尝试将 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 配置中遗漏了一些重要的东西,但无法弄清楚我到底做错了什么。
感谢您的帮助。
这似乎是 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});
}
}