如何使用反应自定义组件？ [复制]

Question

这是我的 app.js 文件：

import React from 'react'
import navAritro from './components/navAritro';

function App() {
  return (
      <navAritro></navAritro>
  )
}

export default App;

我的 index.js 代码在这里：

import { MuiThemeProvider } from '@material-ui/core';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

;

这是我的自定义组件 navAritro.js：

import React from 'react'
import { AppBar,IconButton, Toolbar} from "@material-ui/core";
import MenuIcon from '@material-ui/icons/Menu'

function navAritro() {
    return (
    <AppBar position="static">
        <Toolbar>
            <IconButton>
                <MenuIcon />
            </IconButton>
        </Toolbar>
    </AppBar>
    )
};

export default navAritro;

现在的问题是我的 navAritro.js 组件没有显示。我对这项技术非常陌生。我哪里出错了？

Answer 1

在你的 App.js 中试试这个

import React from 'react'
import NavAritro from './components/navAritro';

function App() {
  return (
      <NavAritro></NavAritro>
  )
}

export default App;