javascript - ReactJs 元素类型无效 检查渲染方法

Question

我一直在尝试解决在 ReactJS 应用程序中使用选项卡时出现的错误。 因此，我使用以下命令创建了一个全新的应用程序:

 create-react-app my-app

并根据react-bootstrap文档将以下内容添加到App.js render()函数中:

<Tabs defaultActiveKey={2} id="uncontrolled-tab-example">
  <Tab eventKey={1} title="Tab 1">
    Tab 1 content
  </Tab>
  <Tab eventKey={2} title="Tab 2">
    Tab 2 content
  </Tab>
  <Tab eventKey={3} title="Tab 3" disabled>
    Tab 3 content
  </Tab>
</Tabs>

这是生成的代码:

import React, { Component, Tabs, Tab } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
          <Tabs defaultActiveKey={2} id="uncontrolled-tab-example">
            <Tab eventKey={1} title="Tab 1">
              Tab 1 content
            </Tab>
            <Tab eventKey={2} title="Tab 2">
              Tab 2 content
            </Tab>
            <Tab eventKey={3} title="Tab 3" disabled>
              Tab 3 content
            </Tab>
          </Tabs>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}


export default App;

App.js 文件导入到index.js 中。同一文件夹(src 文件夹)。 这是文件内容:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

我仍然收到错误:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of App.

我想说导出没有问题，因为应用程序在没有选项卡代码片段的情况下运行良好。 显然，使用选项卡会导致这个问题，但我无法弄清楚上面的问题是什么。

我将感谢您的帮助。 非常感谢。

Answer 1

出现错误是因为模块 'react' 实际上并未导出任何名为 Tabs 或 Tab 的组件，因此当您尝试要从那里导入它们，您将得到未定义。

如果组件来自'react-bootstrap'，请从那里导入它，而不是从'react'导入。 See the Getting Started docs for an example.

import React, { Component } from 'react'
import { Tabs, Tab } from 'react-bootstrap'
import logo from './logo.svg'
import './App.css'