select component, not rendering

react: ^15.4.2, react-select: ^1.0.0-rc.10,

Example.tsx

 import * as React from 'react';
import Select from 'react-select';
// Be sure to include styles at some point, probably during your bootstrapping
import 'react-select/dist/react-select.css';

var Select = require('react-select');
var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

function logChange(val) {
  console.log("Selected: " + JSON.stringify(val));
}

export class Example extends React.Component<any, any> {

  render() {

    return (
        <div>
          <Select name="form-field-name" value="one" options={options} onChange={logChange}/>
        </div>
    );
  }
}

No errors reported at compile time.

Get an error message when attempting to render it

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Example . in Example

Being this is my first react project I have no idea how to debug this. I do not see anything wrong with this code.

Here is my render out of main.tsx

    (() => {

    const container = document.querySelector('#container');
    render( <Example />, container);
})();

---

Well, from the example above which is copy-pasted from react-select docs seems that everything is alright. The error says that you try to render something that is not being able to render (here it says it's some Object ). My bet is this line causes the error:

import Select from 'react-select';

are you sure you properly installed this package?

---

Try to usw curly brackets arround Select in your import statement:

import {Select} from...

If there are no "default" export defined, you have to use those curly bracets to define the component you want to use.

链接地址: http://www.djcxy.com/p/52184.html

上一篇: 从对象值渲染React元素

下一篇: 选择组件，而不是渲染