Reactjs - 导入的组件不呈现

Question

使用create-react-app制作了我的第一个 Reactjs 应用程序。 在我的主要App组件中，我调用了另一个名为menuButtons的组件。 它是导入的，但不显示。

额外信息：在App.js ，当按下 CTRL 键并单击<menuButtons />时，VScode 不会将我重定向到 menuButtons 组件。

文件结构：

│
└───src
    │   App.css
    │   App.js
    │   App.test.js
    │   index.css
    │   index.js
    │   menuButtons.js
    │   registerServiceWorker.js
    │
    └───components
            menuButtons.js

我的应用程序组件：

import React, { Component } from 'react';
import './App.css';
import menuButtons  from './components/menuButtons.js';

class App extends Component {
render() {
 return (
  <div className="App">
    <footer className="App-header">
      <h1 className="App-title">SPEECH RECOGNITION SYSTEM</h1>
    </footer>

    <menuButtons />    
  </div>
  );
 }
}

export default App;

菜单按钮组件：

import React, { Component } from 'react';

export default class menuButtons extends Component {
  render() {
    return (
      <div>
        <p>Press the icon to start recording</p>
      </div>
    );
  }
}

Answer 1

目录结构似乎不正确。 我建议将components目录移到src 。 然后import menuButtons from './components/menuButtons.js';引用import menuButtons from './components/menuButtons.js';

Answer 2

menuButtons的目录似乎不正确。 它必须在下面的示例中。

import menuButtons  from '../components/menuButtons.js';

要么

您可以将组件文件夹移动到src文件夹，然后可以使用

import menuButtons from './components/menuButtons.js';

Answer 3

你必须你的c omponentname更改为C omponentname（如果它不到风度工作尝试在你的组件的文件名相同的问题）

Answer 4

如果您在src目录中，请尝试不使用.js

import menuButtons  from './components/menuButtons';

Answer 5

将名称为camelCase的组件更改为PascalCase，它可以正常工作。 但是我仍然很困惑，因为React-Native中组件的命名约定取决于用户的偏好。

Answer 6

您必须重写未呈现的组件的名称，而不是将 menuButtons 更改为 MenuButtons。