React嵌套自定义组件时Shelf未渲染内部Book子组件问题

React组件标签内部嵌套的内容不会自动渲染，这些嵌套内容会被作为children属性传递给外层组件，必须由组件手动读取并插入到JSX结构中才会显示。
你当前的Shelf组件直接返回了没有任何子节点的空<div className="shelf-div"></div>，完全没有处理传入的children属性，因此嵌套在Shelf标签内的Book组件会被直接忽略，页面只会渲染空的书架样式。

只需要修改Shelf.js代码，接收组件props并在书架容器内渲染props.children即可：

import React from 'react';
import '../css/shelf.css';

function Shelf(props) {
    return (
        <div className="shelf-div">
            {props.children}
        </div>
    );
}

export default Shelf;

修改完成后，你在Bookstore.js中写在<Shelf>和</Shelf>之间的所有元素都会被渲染到对应书架的容器内部：第一个嵌套了3个Book的Shelf会正常显示3本书，第二个没有嵌套内容的Shelf会保持空书架状态，完全满足不同书架配置不同书籍的需求，不需要把Book硬编码写死在Shelf组件里。

如果需要区分不同书籍，可以给Book组件传入自定义props实现，示例：

• 修改Book组件接收props展示书籍信息

import React from 'react';
import '../css/book.css';

function Book(props) {
    return <div className="book-div">{props.bookName}</div>;
}

export default Book;

• 在Bookstore中给不同书架配置不同书籍

import React from 'react';
import Book from './Book';
import Shelf from './Shelf';

function Bookstore() {
    return (
        <div>
            <Shelf>
                <Book bookName="React实战" />
                <Book bookName="JS高级程序设计" />
                <Book bookName="CSS权威指南" />
            </Shelf>
            <Shelf>
                <Book bookName="百年孤独" />
                <Book bookName="活着" />
            </Shelf>
        </div>
    );
}

export default Bookstore;

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