Reactjs 反应-子组件未显示

我试图在另一个子组件中插入一个子组件，但我的代码不起作用。以下代码是我试图构建的结构

const AddProductPage= () => {
    return (
        <PageTemplate>
            <ProductTemplate>
                <AddProduct />
            </ProductTemplate>
        </PageTemplate>
    );
};

const AddProductPage=（）=>{
返回(
);
};

constpagetemplate=（{children}）=>{
返回(
{儿童}
);
};

类ProductTemplate扩展组件{
render（）{
返回(
...
{this.props.children}
);
}
}

class AddProduct扩展组件{
render（）{
返回(
添加产品
);
}
}

我正在尝试将AddProduct组件作为子项插入ProductTemplate组件中，该子项作为子项插入PageTemplate组件中。然而，AddProductPage并没有显示AddProduct组件。如果有人能帮上忙，我将不胜感激。

这是您的一段代码

很好！。我已经删除了cx API。我想问题可能是类名解析。检查dom层次结构中的子dom节点是否存在，以及它们是否已收到各自的类名

const PageTemplate= ({children}) => {
return (
    <div className={'pagetemplate'}>
        <HeaderContainer />
        <main>
            {children}
        </main>
        <Footer />
    </div>
 );
};

constpagetemplate=（{children}）=>{
返回(
{儿童}
);
};

我已经运行了你的代码。可能您缺少默认的导出语句

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import AddProductPage from './AddProductPage';
ReactDOM.render(<AddProductPage />, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
从“/AddProductPage”导入AddProductPage；
ReactDOM.render（，document.getElementById（'root'））；

AddProductPage.js

import React from 'react';
import PageTemplate from './PageTemplate';
import ProductTemplate from './ProductTemplate';
import AddProduct from './AddProduct';

const AddProductPage= () => {
return (
    <PageTemplate>
        <ProductTemplate>
            <AddProduct />
        </ProductTemplate>
    </PageTemplate>
);
};

export default AddProduct;

从“React”导入React；
从“/PageTemplate”导入PageTemplate；
从“./ProductTemplate”导入ProductTemplate；
从“/AddProduct”导入AddProduct；
const AddProductPage=（）=>{
返回(
);
};
出口默认产品；

PageTemplate.js

import React from 'react';

const PageTemplate= ({children}) => {
return (
    <div>
        <main>
            {children}
        </main>
    </div>
);
};

export default PageTemplate;

import React,{Component} from 'react';

class ProductTemplate extends Component {
render() {
    return (
        <div>
            <div>
                {this.props.children}
            </div>
        </div>
    );
};
};

export default ProductTemplate;

从“React”导入React；
常量页面模板=（{children}）=>{
返回(
{儿童}
);
};
导出默认页面模板；

ProductTemplate.js

import React from 'react';

const PageTemplate= ({children}) => {
return (
    <div>
        <main>
            {children}
        </main>
    </div>
);
};

export default PageTemplate;

import React,{Component} from 'react';

class ProductTemplate extends Component {
render() {
    return (
        <div>
            <div>
                {this.props.children}
            </div>
        </div>
    );
};
};

export default ProductTemplate;

import React，{Component}来自'React'；
类ProductTemplate扩展组件{
render（）{
返回(
{this.props.children}
);
};
};
导出默认产品模板；

AddProduct.js

import  React, {Component} from 'react';

class AddProduct extends Component {
render() {
    return (
        <div>
            addproduct
        </div>
    );
};
};

export default AddProduct;

import React，{Component}来自'React'；
类AddProduct扩展组件{
render（）{
返回(
添加产品
);
};
};
出口默认产品；

输出如下：

---

addproduct

您的代码似乎很好。您是否导入了

AddProduct

？是的。我导入了AddProduct，但没有显示。我不知道出了什么问题。检查控制台是否有任何错误或警告。刚刚按照您的建议检查完dom层次结构，但一切似乎都很好。真令人沮丧。。哈哈，我想我会继续找的。谢谢你的建议！

import  React, {Component} from 'react';

class AddProduct extends Component {
render() {
    return (
        <div>
            addproduct
        </div>
    );
};
};

export default AddProduct;