Question

反应：^ 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>
    );
  }
}

编译时没有报告错误。

尝试渲染时收到错误消息

React.createElement：type无效 - 期望一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：对象。检查Example的呈现方法。在示例中

这是我的第一个反应项目，我不知道如何调试它。我认为这段代码没有任何问题。

这是我的main.tsx渲染

    (() => {

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

Answer 1

好吧，从上面的示例中，从react-select文档进行了复制粘贴，似乎一切都没问题。该错误表示您尝试渲染无法渲染的内容（此处它表示某些Object）。我的赌注是这一行会导致错误：

import Select from 'react-select';

你确定你正确安装了这个包吗？

Answer 2

尝试使用大括号arround在import语句中选择：

import {Select} from...

如果没有＆＃34;默认＆＃34;如果已定义导出，则必须使用这些花括号来定义要使用的组件。

Answer 3

DirectoryProvider

Answer 4

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';  


export class Example extends React.Component<any, any> {
  var options = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' }
  ];

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

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

Answer 5

快速解答，这应该可行：

演示：https://codesandbox.io/s/stupefied-vaughan-z4mkv?file=/src/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 options = [
  { value: "one", label: "One" },
  { value: "two", label: "Two" }
];

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

export default class Example extends React.Component<any, any> {
  render() {
    return (
      <div>
        <Select
          name="form-field-name"
          value="one"
          options={options}
          onChange={logChange}
        />
      </div>
    );
  }
}

错误原因：

要么使用export default class Example extends React.Component<any, any> {，要么在您要导入并使用<Example />的任何文件中，将其导入为import { Example } from './path/to/file'。未在导入文件中使用default导出说明符或命名的import导致此错误。阅读imports / exports in js

要做的事情：

删除var Select = require('react-select');。这与import Select from 'react-select';相同，只是导入格式不同（有关ESM和CommonJS的更多信息，请阅读。）我们应该避免导入组件
改为使用import React from 'react'。

反应选择组件，而不是渲染

5 个答案: