React中Sidebar组件无法渲染，children属性失效问题求助

按照教程完成操作后，React应用无法渲染，页面显示空白。使用自定义的topMenu和bottomMenu属性时组件可正常工作，但使用children属性时就不行。相关代码如下：

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
   <App/>,
  document.getElementById('root')
);

reportWebVitals();

App.js #

import React from "react";
import Sidebar from "./Sidebar";

function App() {
    return(
        <div>
            <Sidebar>
                <a href="/">Home</a>
                <a href="/products">Products</a>
                <a href="/pricing">Pricing</a>
                <a href="/contact">Contact</a>
            </Sidebar>
        </div>
    );
};

export default App;

Sidebar.js #

import React from "react";
import "./Sidebar.css";

function Sidebar(props) { 

    return(
        <aside className="Sidebar">
            <nav className="Sidebar-nav">
                {props.chidren}
            </nav>
        </aside>
    );
};

export default Sidebar;

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

使用自定义属性时的正常代码片段 #

修改后的Sidebar.js部分代码：

<nav className="Sidebar-nav">
    {props.topMenu}
</nav>
<nav className="Sidebar-nav">
    {props.bottomMenu}
</nav>

修改后的App.js部分代码：

<Sidebar topMenu={
        <div>
             <a href="/">Home</a>
             <a href="/products">Products</a>
        </div>   
    }
    bottomMenu={
        <div>
             <a href="/pricing">Pricing</a>
             <a href="/contact">Contact</a>
        </div>
    }
/>

问题原因及解决方法 #

核心问题是拼写错误：在Sidebar.js中，你写的是props.chidren，正确的应该是props.children（少了一个字母l）。

React会将组件标签内的内容自动存入props.children属性，当你拼写错误时，props.chidren是一个不存在的属性，值为undefined，所以渲染时没有内容，页面显示空白。而使用自定义属性时，你拼写的topMenu和bottomMenu是正确的，所以能正常获取到传入的内容并渲染。

另外，index.js中的root.render方法存在冗余参数：createRoot创建的根对象调用render时，只需要传入要渲染的React元素即可，不需要第二个参数document.getElementById('root')，修正后代码如下：

root.render(<App />);

内容的提问来源于stack exchange，提问作者2021