我试图将SelectField插入到我的组件中。虽然所有其他材料-ui组件都能正常工作,但这会导致以下错误:
Uncaught Error: Invalid tag: 6ff349240eb3913e56be1f53fb8a0ac4.js
at invariant (app.js:9293)
at validateDangerousTag (app.js:20072)
at new ReactDOMComponent (app.js:20099)
at Object.createInternalComponent (app.js:25256)
at instantiateReactComponent (app.js:23936)
at instantiateChild (app.js:23743)
at app.js:23770
at traverseAllChildrenImpl (app.js:25453)
at traverseAllChildrenImpl (app.js:25469)
at traverseAllChildrenImpl (app.js:25469)
这是包含SelectField:
的代码import React, {Component} from 'react'
import {connect} from 'react-redux'
import {reduxForm, Field} from 'redux-form'
import {Link} from 'react-router'
import SelectField from 'material-ui/SelectField'
import MenuItem from 'material-ui/MenuItem'
import {Button} from 'react-bootstrap'
const styles = {
errorStyle: {
color: 'red',
marginBottom: '5px'
},
submit: {
float: 'left'
},
title: {
textAlign: 'center',
width: '100%',
marginBottom: 10,
fontSize: 14,
color: '#555'
}
}
const renderSelectField = props => (
<SelectField
floatingLabelText={props.label}
onChange={(event, index, value) => props.onChange(value)}>
</SelectField>
)
class DeviceSchedule extends Component {
render() {
const {handleSubmit, pristine, submitting} = this.props
return (
<form onSubmit={handleSubmit}>
<div className='box-body'>
<div className="row">
<div className="col-md-4">
<Field name="favoriteColor" component={renderSelectField} label="Favorite Color">
<MenuItem value={'ff0000'} primaryText="Red"/>
<MenuItem value={'00ff00'} primaryText="Green"/>
<MenuItem value={'0000ff'} primaryText="Blue"/>
</Field>
</div>
</div>
</div>
<div className='box-footer'>
<div style={styles.submit}>
<Button bsStyle="primary"
type="submit"
disabled={pristine || submitting}>
agendar
</Button>
</div>
<div style={styles.submit}>
<Link to="devices">
<Button>cancelar</Button>
</Link>
</div>
</div>
</form>
)
}
}
DeviceSchedule = reduxForm({form: 'deviceSchedule', destroyOnUnmount: false, enableReinitialize: true})(DeviceSchedule)
const mapStateToProps = state => ({item: state.devices.item, initialValues: state.devices.item})
export default connect(mapStateToProps, null)(DeviceSchedule)
当我删除一切正常。
这些是我的依赖:
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"json-loader": "^0.5.4",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
},
"dependencies": {
"admin-lte": "^2.3.6",
"axios": "^0.15.3",
"bluebird": "^3.5.0",
"classnames": "^2.2.5",
"font-awesome": "^4.7.0",
"ionicons": "^3.0.0",
"jquery": "^3.2.1",
"lodash": "^4.17.4",
"material-ui": "^0.16.7",
"moment": "^2.18.1",
"moment-timezone": "^0.5.13",
"react": "^15.6.1",
"react-bootstrap": "^0.31.1",
"react-cookie": "^2.0.7",
"react-dom": "^15.6.1",
"react-moment": "^0.3.0",
"react-redux": "^4.4.6",
"react-redux-toastr": "^4.4.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"react-select": "^1.0.0-rc.5",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.6.0",
"redux-form": "^6.4.1",
"redux-form-material-ui": "^4.2.0",
"redux-multi": "^0.1.12",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"validator": "^7.1.0"
}
有谁知道如何解决这个问题?我已经通过多种方式尝试过它,而且我并没有尝试解决这个问题。