React.js TodoList应用组件内容无法显示排查求助

我仔细看了你的代码，发现几个关键问题导致NavBar和ToDoList组件的内容无法显示，咱们逐个解决：

核心问题1：函数组件缺少return语句 #

React的函数组件必须通过return返回要渲染的JSX内容，你的NavBar和ToDoList组件都没有写return，所以组件不会渲染任何东西。

核心问题2：JSX语法错误 #

代码里存在不少拼写、符号错误，比如全角符号、标签闭合错误、属性值引号不匹配、类名拼写错误等，这些都会导致React无法正确解析组件。

核心问题3：导入路径错误 #

App组件中导入NavBar时的路径有语法错误，会导致组件无法正确引入。

修正后的NavBar组件 #

import React from "react";
import { FaListAlt, FaCheckSquare, FaPlusSquare, FaTrash } from 'react-icons/fa';

const NavBar = () => {
  return (
    <footer className="d-flex justify-content-between bg-secondary p-3" id="mainFooter">
      <div className="btn-group">
        <a href="https://google.com" className="btn btn-outline-dark bg-light">
          <FaListAlt />
        </a>
        <a href="https://google.com" className="btn btn-outline-dark bg-light">
          <FaCheckSquare />
        </a>
        <a href="https://google.com" className="btn btn-outline-dark bg-light">
          <FaPlusSquare />
        </a>
      </div>
      <button className='btn btn-outline-dark bg-light'>
        <FaTrash />
      </button>
    </footer>
  )
}

export default NavBar

修正后的ToDoList组件 #

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const ToDoList = () => {
  return (
    <ul className="list-group m-3">
      <li className="list-group-item d-flex align-items-center">
        Ranger la vaiselle
        <button className="btn btn-sm ml-auto btn-outline-success">&#x2713;</button>
      </li>
      <li className="list-group-item d-flex align-items-center">
        Répondre appel d'offres
        <button className="btn btn-sm ml-auto btn-outline-success">&#x2713;</button>
      </li>
      <li className="list-group-item d-flex align-items-center">
        Signer contrat
        <button className="btn btn-sm ml-auto btn-outline-success">&#x2713;</button>
      </li>
      <li className="list-group-item d-flex align-items-center">
        Ranger le salon
        <button className="btn btn-sm ml-auto btn-outline-success">&#x2713;</button>
      </li>
    </ul>
  )
}

export default ToDoList;

修正后的App组件 #

import React from "react";
import ToDoList from './ToDoList';
import NavBar from './NavBar';

class App extends React.Component {
  render (){
    return(
      <section id='todo'>
        <h1 className="m-3">Liste de tâches</h1>
        <ToDoList />
        <NavBar/>
      </section>
    )
  }
}

export default App;

修正后的index.js（根文件） #

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from "./components/App"

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App/>);

把这些修正后的代码替换你原来的文件，应该就能正常显示Todo列表和导航栏了。主要就是补全return语句，修正各种语法拼写错误，还有导入路径的问题。

备注：内容来源于stack exchange，提问作者levi