[英]How to fix Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object
I am trying to run ReactRails app and trying to run a very simple react-select component. 我正在尝试运行ReactRails应用程序并尝试运行一个非常简单的react-select组件。 However, in the same file if I print just a simple
h2
element it works but <Select/>
doesn't work. 但是,在同一个文件中,如果我只打印一个简单的
h2
元素,它可以工作但<Select/>
不起作用。 It gives: 它给:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
I am trying to use react-select
component. 我正在尝试使用
react-select
组件。 I've installed it via yarn add
command. 我已经通过
yarn add
命令安装了它。
User.jsx: User.jsx:
var React = require("react")
var Select = require("react-select")
var PropTypes = require("prop-types")
// also tried these ->
// import React from 'react';
// import createClass from 'create-react-class';
// import PropTypes from 'prop-types';
// import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' }
];
class User extends React.Component {
state = {
selectedOption: null,
}
handleChange = (selectedOption) => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
}
render() {
const { selectedOption } = this.state;
/*
return (
<h2>THIS WORKS!</h2>
)
*/
return (
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
)
// Doesn't work:
// Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
}
}
module.exports = User
I am very new to React world. 我对React世界很新。 What Am I missing here?
我在这里失踪了什么? What am I doing wrong?
我究竟做错了什么?
Note: This did not solved my problem: Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object 注意:这没有解决我的问题: 未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或类/函数但得到:对象
I'm not sure how the module.exports plays with React. 我不确定module.exports如何与React一起玩。 When I try your code with ES6 syntax it seems to work fine.
当我尝试使用ES6语法的代码时,似乎工作正常。
import React from 'react';
import Select from 'react-select';
and then using ES6 export instead of module.exports: 然后使用ES6导出而不是module.exports:
export default User;
The Select component doesn't seem to be the issue. 选择组件似乎不是问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.