Reactjs - 导入的组件不渲染

Question

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

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

文件结构：

│
└───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';

Answer 2

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

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

或

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

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

Answer 3

您必须将c omponentname更改为Componentname(如果它不起作用，请在您的组件文件名上尝试相同的问题(

Answer 4

如果你在src目录中 尝试不.js

import menuButtons  from './components/menuButtons';

Answer 5

将名为 camelCase 的组件更改为 PascalCase，它工作了。但我仍然感到困惑，因为 React-Native 中组件的命名约定取决于用户的偏好。

Answer 6

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