错误无效标记SelectField material-ui

时间:2017-07-26 00:56:39

标签: reactjs redux react-redux material-ui

我试图将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"
  }

有谁知道如何解决这个问题?我已经通过多种方式尝试过它,而且我并没有尝试解决这个问题。

0 个答案:

没有答案