React中被包裹的Header组件未渲染？新手技术求助

你的Wrapper组件没有处理子组件（children），所以当你在App里把Header作为Wrapper的子元素传入时，Wrapper根本没把它渲染出来。

React里，父组件包裹的子元素会被自动放到组件的props.children属性里，如果组件内部不主动渲染这个属性，子元素就不会显示。

修改Wrapper.jsx，接收props并渲染props.children即可：

import React from "react";
function Wrapper(props){
    return(
        <>            
            <h1>This is A WRAPPER!</h1>
            {props.children} {/* 这里渲染传入的子组件 */}
        </>
    )
}
export default Wrapper;

修改后，Header的内容就会和Wrapper的内容一起显示出来了。

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