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

我仍然收到错误：

元素类型无效：需要一个字符串（用于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从您定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查渲染 App的方法。

我说导出没有问题，因为没有Tabs代码片段，应用效果很好。显然，使用制表符会导致这个问题，但我无法弄清楚上述问题是什么。

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

Answer 1

错误显示是因为模块'react'实际上并未导出名为Tabs或Tab的任何组件，所以当您尝试从那里导入它们时，您就会＃39 ;得到undefined。

如果该组件来自'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'

ReactJs元素类型无效检查render方法

1 个答案: