Reactjs Resct JS react Dragable选项卡-未捕获不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数
我在将react-Dragable选项卡（）集成到react-JS/Play框架应用程序时遇到问题 我已将项目示例目录中app.js（）中的代码示例重写到我的.jsx组件中：Reactjs Resct JS react Dragable选项卡-未捕获不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数,reactjs,playframework,draggable,Reactjs,Playframework,Draggable,我在将react-Dragable选项卡（）集成到react-JS/Play框架应用程序时遇到问题 我已将项目示例目录中app.js（）中的代码示例重写到我的.jsx组件中： 'use strict'; import _ from 'lodash'; import React from 'react'; import ContentWrapper from '../Layout/ContentWrapper'; import { Grid, Row, Col, Dropdown, Panel}
'use strict';
import _ from 'lodash';
import React from 'react';
import ContentWrapper from '../Layout/ContentWrapper';
import { Grid, Row, Col, Dropdown, Panel} from 'react-bootstrap';
import spdf from "simple-react-pdf";
import PanelsRun from './Panels.run';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {Dialog, FlatButton, Menu, MenuItem, TextField} from 'material-ui';
import Tabs from 'react-draggable-tab';
import Tab from 'react-draggable-tab';
import DynamicTabContent from 'react-draggable-tab';
import DynamicTabBadge from 'react-draggable-tab';
//allow react dev tools work
window.React = React;
const tabsClassNames = {
tabWrapper: 'myWrapper',
tabBar: 'myTabBar',
tabBarAfter: 'myTabBarAfter',
tab: 'myTab',
tabTitle: 'myTabTitle',
tabCloseIcon: 'tabCloseIcon',
tabBefore: 'myTabBefore',
tabAfter: 'myTabAfter'
};
const tabsStyles = {
tabWrapper: {marginTop: '10px'},
tabBar: {},
tab:{},
tabTitle: {},
tabCloseIcon: {},
tabBefore: {},
tabAfter: {}
};
class CVs extends React.Component {
constructor(props) {
super(props);
let icon = (<image src='icon.png' style={{height:'13px'}}/>);
let fonticon = (<icon className='icon-html5'/>);
let badge = (<DynamicTabBadge />);
this.state = {
tabs:[
(<Tab key={'tab0'} title={'unclosable tab'} disableClose={true} >
<div>
<h1>This tab cannot close</h1>
</div>
</Tab>),
(<Tab key={'tab1'} title={'1stTab'} beforeTitle={icon} >
<div>
<h1>This is tab1</h1>
</div>
</Tab>),
(<Tab key={'tab2'} title={'2ndTab Too long Toooooooooooooooooo long'} beforeTitle={fonticon} >
<div>
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
</pre>
</div>
</Tab>),
(<Tab key={'tab3'} title={'Dynamic tab'} afterTitle={badge}>
<DynamicTabContent/>
</Tab>)
],
badgeCount: 0
};
}
handleTabSelect(e, key, currentTabs) {
console.log('handleTabSelect key:', key);
this.setState({selectedTab: key, tabs: currentTabs});
}
handleTabClose(e, key, currentTabs) {
console.log('tabClosed key:', key);
this.setState({tabs: currentTabs});
}
handleTabPositionChange(e, key, currentTabs) {
console.log('tabPositionChanged key:', key);
this.setState({tabs: currentTabs});
}
handleTabAddButtonClick(e, currentTabs) {
// key must be unique
const key = 'newTab_' + Date.now();
let newTab = (<Tab key={key} title='untitled'>
<div>
<h1>New Empty Tab</h1>
</div>
</Tab>);
let newTabs = currentTabs.concat([newTab]);
this.setState({
tabs: newTabs,
selectedTab: key
});
}
render() {
return (
<ContentWrapper>
<Tabs
tabsClassNames={tabsClassNames}
tabsStyles={tabsStyles}
selectedTab={this.state.selectedTab ? this.state.selectedTab : "tab2"}
onTabSelect={this.handleTabSelect.bind(this)}
onTabClose={this.handleTabClose.bind(this)}
onTabAddButtonClick={this.handleTabAddButtonClick.bind(this)}
onTabPositionChange={this.handleTabPositionChange.bind(this)}
tabs={this.state.tabs}
shortCutKeys={
{
'close': ['alt+command+w', 'alt+ctrl+w'],
'create': ['alt+command+t', 'alt+ctrl+t'],
'moveRight': ['alt+command+tab', 'alt+ctrl+tab'],
'moveLeft': ['shift+alt+command+tab', 'shift+alt+ctrl+tab']
}
}
/>
</ContentWrapper>
);
}
};
CVs.childContextTypes = {
muiTheme: React.PropTypes.object
};
export default CVs;
{
"name": "play-react-webpack",
"version": "1.0.0",
"description": "Playframework + React Js + webpack",
"main": "index.js",
"author": "Nouhoum Traoré",
"license": "BSD-2-Clause",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"prestart": "bower install",
"start": "npm install",
"poststart": "gulp"
},
"repository": {
"type": "git",
"url": "git+https://github.com/nouhoum/play-react-webpack.git"
},
"keywords": [
"play",
"reactjs",
"webpack"
],
"bugs": {
"url": "https://github.com/nouhoum/play-react-webpack/issues"
},
"homepage": "https://github.com/nouhoum/play-react-webpack#readme",
"dependencies": {
"alt": "^0.18.4",
"classnames": "2.2.5",
"history": "^2.0.0-rc2",
"pubsub-js": "^1.5.3",
"react": "15.2.1",
"react-addons-css-transition-group": "15.2.1",
"react-bootstrap": "^0.28.2",
"react-bootstrap-table": "^2.3.6",
"react-dom": "15.2.1",
"react-draggable-tab": "^0.7.0",
"react-router": "2.5.2 ",
"react-router-bootstrap": "0.23.0",
"simple-react-pdf": "1.0.6"
},
"devDependencies": {
"babel-core": "6.10.4",
"babel-loader": "6.2.4",
"babel-plugin-react-require": "2.1.0",
"babel-plugin-transform-react-jsx": "6.8.0",
"babel-plugin-add-module-exports": "0.2.1",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.11.1",
"babel-preset-stage-0": "6.0.15",
"browser-sync": "^2.11.0",
"css-loader": "^0.23.1",
"eslint": "^2.12.0",
"eslint-loader": "^1.3.0",
"gulp-bundle-assets": "^2.27.1",
"gulp-changed": "^1.1.0",
"gulp-concat": "^2.4.1",
"gulp-cssnano": "^2.1.1",
"gulp-expect-file": "0.0.7",
"gulp-filter": "^1.0.2",
"gulp-watch": "^4.3.8",
"gulp-plumber": "1.1.0",
"gulp-flatten": "^0.2.0",
"gulp-html-prettify": "0.0.1",
"gulp-if": "^1.2.5",
"gulp-ignore": "^1.2.1",
"gulp-jade": "^0.10.0",
"gulp-jsvalidate": "^2.0.0",
"gulp-less": "^1.3.9",
"gulp-load-plugins": "^0.10.0",
"gulp-rename": "^1.2.0",
"gulp-rtlcss": "^0.1.4",
"gulp-sass": "^2.1.1",
"gulp-sourcemaps": "^1.3.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.1.0",
"gulp-util": "^3.0.1",
"jsx-loader": "^0.13.2",
"node-sass": "^3.7.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.7.1",
"webpack-stream": "^3.2.0",
"react-tap-event-plugin": "^1.0.0",
"material-ui": "0.15.2"
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, hashHistory, browserHistory, IndexRoute } from 'react-router';
import initTranslation from './components/Common/localize';
import initLoadCss from './components/Common/load-css';
import Base from './components/Layout/Base';
import BasePage from './components/Layout/BasePage';
import BaseHorizontal from './components/Layout/BaseHorizontal';
import SingleView from './components/SingleView/SingleView';
import SubMenu from './components/SubMenu/SubMenu';
import Candidates from './components/Candidates/Candidates';
import CVs from './components/CVs/CVs';
// Init translation system
initTranslation();
// Init css loader (for themes)
initLoadCss();
ReactDOM.render(
<Router history={browserHistory}>
<Route path="/" component={Base}>
{/* Default route*/}
<IndexRoute component={SingleView} />
<Route path="singleview" component={SingleView}/>
<Route path="submenu" component={SubMenu}/>
<Route path="candidates" component={Candidates}/>
<Route path="cvs" component={CVs}/>
</Route>
{/* Not found handler */}
{/*<Route path="*" component={NotFound}/>*/}
</Router>,
document.getElementById('app')
);
{
"name": "play-react-webpack",
"version": "1.0.0",
"description": "Playframework + React Js + webpack",
"main": "index.js",
"author": "Nouhoum Traoré",
"license": "BSD-2-Clause",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"prestart": "bower install",
"start": "npm install",
"poststart": "gulp"
},
"repository": {
"type": "git",
"url": "git+https://github.com/nouhoum/play-react-webpack.git"
},
"keywords": [
"play",
"reactjs",
"webpack"
],
"bugs": {
"url": "https://github.com/nouhoum/play-react-webpack/issues"
},
"homepage": "https://github.com/nouhoum/play-react-webpack#readme",
"dependencies": {
"alt": "^0.18.4",
"classnames": "2.2.5",
"history": "^2.0.0-rc2",
"pubsub-js": "^1.5.3",
"react": "15.2.1",
"react-addons-css-transition-group": "15.2.1",
"react-bootstrap": "^0.28.2",
"react-bootstrap-table": "^2.3.6",
"react-dom": "15.2.1",
"react-draggable-tab": "^0.7.0",
"react-router": "2.5.2 ",
"react-router-bootstrap": "0.23.0",
"simple-react-pdf": "1.0.6"
},
"devDependencies": {
"babel-core": "6.10.4",
"babel-loader": "6.2.4",
"babel-plugin-react-require": "2.1.0",
"babel-plugin-transform-react-jsx": "6.8.0",
"babel-plugin-add-module-exports": "0.2.1",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.11.1",
"babel-preset-stage-0": "6.0.15",
"browser-sync": "^2.11.0",
"css-loader": "^0.23.1",
"eslint": "^2.12.0",
"eslint-loader": "^1.3.0",
"gulp-bundle-assets": "^2.27.1",
"gulp-changed": "^1.1.0",
"gulp-concat": "^2.4.1",
"gulp-cssnano": "^2.1.1",
"gulp-expect-file": "0.0.7",
"gulp-filter": "^1.0.2",
"gulp-watch": "^4.3.8",
"gulp-plumber": "1.1.0",
"gulp-flatten": "^0.2.0",
"gulp-html-prettify": "0.0.1",
"gulp-if": "^1.2.5",
"gulp-ignore": "^1.2.1",
"gulp-jade": "^0.10.0",
"gulp-jsvalidate": "^2.0.0",
"gulp-less": "^1.3.9",
"gulp-load-plugins": "^0.10.0",
"gulp-rename": "^1.2.0",
"gulp-rtlcss": "^0.1.4",
"gulp-sass": "^2.1.1",
"gulp-sourcemaps": "^1.3.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.1.0",
"gulp-util": "^3.0.1",
"jsx-loader": "^0.13.2",
"node-sass": "^3.7.0",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.7.1",
"webpack-stream": "^3.2.0",
"react-tap-event-plugin": "^1.0.0",
"material-ui": "0.15.2"
}
}