Недопустимый тип элемента ReactJs. Проверьте метод рендеринга.

Question

Я пытался устранить ошибку при использовании вкладок в моем приложении ReactJS. Итак, я создал новое приложение с командой:

 create-react-app my-app

и добавил следующее в функцию рендеринга App.js в соответствии с документами о реакции-загрузке:

<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();

Я все еще получаю ошибку:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: undefined. Вы скорее всего забыл экспортировать ваш компонент из файла, в котором он определен, или вы могли бы смешать импорт по умолчанию и имена. Проверьте рендер метод App.

Я бы сказал, что с экспортом проблем нет, так как приложение работает хорошо без фрагмента кода Tabs. По-видимому, использование вкладок вызывает эту проблему, но я не могу понять, что не так с вышеуказанным.

Буду признателен за вашу помощь. Большое спасибо.

Answer 1

Ошибка появляется, потому что модуль 'react' на самом деле не экспортирует ни один компонент с именем Tabs или Tab, поэтому, когда вы попытаетесь импортировать их оттуда, вы получите undefined.

Если компонент поступил из 'react-bootstrap', импортируйте его оттуда, а не из 'react'. См. Документацию по началу работы.

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