Question

我正在尝试在另一个子组件中插入一个子组件，但是我的代码无法正常工作。以下代码是我要构建的结构。

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

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

class ProductTemplate extends Component {
    render() {
        return (
            <div className={cx('product-template')}>
                ...
                <div className={cx('display')}>
                    {this.props.children}
                </div>
            </div>
        );
    }
}

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

我正在尝试将ProductProduct组件中的AddProduct组件作为子项插入，将其作为子项插入PageTemplate组件中。但是，AddProductPage没有显示AddProduct组件。如果有人可以提供帮助，我将不胜感激。

Answer 1

这是您代码的Fiddle

工作正常！我已经删除了cx API。我想问题可能出在className解析上。在儿童DOM节点存在的情况下检查dom层次结构，并且他们已收到各自的类名。

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

Answer 2

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import AddProductPage from './AddProductPage';
ReactDOM.render(<AddProductPage />, 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;

PageTemplate.js

import React from 'react';

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

export default PageTemplate;

ProductTemplate.js

import React,{Component} from 'react';

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

export default ProductTemplate;

AddProduct.js

import  React, {Component} from 'react';

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

export default AddProduct;

输出是这样的： addproduct

反应-子组件未显示

2 个答案: