反応する選択コンポーネントを、

Question

をレンダリングしない反応：^ 15.4.2、 が反応選択：^ 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> 
    ); 
    } 
} 

報告エラーなしコンパイル時に。

これは私がこれをデバッグする方法は考えている私の最初の反応のプロジェクトですなので、それを

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

をレンダリングしようとすると、エラーメッセージを取得します。私はこのコードに何か間違っているとは思わない。ここで

は私のreact-selectドキュメントからコピー＆ペーストである上記の例から、まあmain.tsxのうち、

(() => { 

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

Answer 1

をレンダリングしているすべてが大丈夫であるようです。エラーはレンダリングできないものをレンダリングしようとしていることを示しています（ここにはObjectと表示されています）。

import Select from 'react-select'; 

はあなたが適切にこのパッケージをインストールしてください、次のとおりです。 私の賭けは、この行がエラーを起こしているのですか？

Answer 2

ことはあなたのimport文で選択arroundのUSW中括弧にしてみてください。

import {Select} from...

定義され"デフォルト"輸出が存在しない場合は、あなたが使用するコンポーネントを定義するために、それらの巻き毛bracetsを使用する必要があります。