已定义但从未使用 no-unused-var

Question

我是 React 新手，现在正在尝试了解 React 组件。但是当我创建 nameList.js，在其中添加数据并导出到 app.js 时，它不会在浏览器中显示任何内容。我在 Stackoverflow 上阅读了一些答案并尝试了它。但不显示任何内容。

应用程序.js

import './App.css';
import nameList from './Components/nameList';

function App() {
  return (
    <div className="App">
      <div className="App" >
            <nameList/>
        </div>
    </div>
  );
}

export default App;

组件文件夹中的 nameList.js

import React from 'react';

function nameList() {
    return (
    <div>
       <h1>Name List</h1>
        <ul>
            <li>Stu1</li>
            <li>Stu2</li>
            <li>Stu3</li>
        </ul>
    </div>
  )
}

export default nameList;

我需要将 nameList.js 中的数据获取到 App.js 中

Answer 1

确保 nameList 以大写字母开头，以便 React 知道它是一个组件而不是 HTML 元素。

import React from 'react';

function NameList() {
    return (
    <div>
       <h1>Name List</h1>
        <ul>
            <li>Stu1</li>
            <li>Stu2</li>
            <li>Stu3</li>
        </ul>
    </div>
  )
}

export default NameList;

应用程序.js

import './App.css';
import NameList from './Components/nameList';

function App() {
  return (
    <div className="App">
      <div className="App" >
            <NameList/>
        </div>
    </div>
  );
}

export default App;

https://react.dev/learn/your-first-component#what-the-browser-sees