以简单的方式创建 React 子组件！

大家好，
如果您正在使用 React，并且使用过像React Bootstrap这样的库，那么您一定见过或使用过类似的组件<Dropdown.Item>。您是否想过如何创建这样的组件？
在本文中，我们将学习如何创建具有独立模块或子组件的组件，就像上面的组件一样Dropdown。

注意：如果子组件有任何特定名称或术语，请在下面的评论中告诉我。

在本教程中，我们将创建一个非常简单的卡片组件。该组件包含 Header、Body 和 Footer 三个子模块。出于教程目的，我将保持此卡片组件的简洁，不添加任何复杂的功能。实际应用中，您可以像 React 中的其他组件一样为其添加其他功能。虽然本教程使用的是普通的 ReactJS，但您也可以将相同的组件结构用于 React Native 应用。

我们将要创建的卡片组件看起来像这样 -

现在，让我们先看一下代码，更好地理解它的结构。下面是我们用来创建上述组件的代码。

import React from 'react';

const Card = ({ children }) => {
    let subComponentList = Object.keys(Card);

    let subComponents = subComponentList.map((key) => {
        return React.Children.map(children, (child) =>
            child.type.name === key ? child : null
        );
    });

    return (
        <>
            <div className='card'>
                {subComponents.map((component) => component)}
            </div>
        </>
    );
};

const Header = (props) => <div className='card-header'>{props.children}</div>;
Card.Header = Header;

const Body = (props) => <div className='card-body'>{props.children}</div>;
Card.Body = Body;

const Footer = (props) => <div className='card-footer'>{props.children}</div>;
Card.Footer = Footer;

export default Card;

如你所见，在上面的代码中，我们将卡片组件视为 JavaScript 中的一个普通对象。我们的子组件 Header、Body 和 Footer 被作为 Card 组件的键传递给它。

因此，在卡片内部，我们首先要创建卡片所有键（即子组件）的列表。这样，我们就可以添加任意数量的子组件。

获取子组件列表后，我们只需通过 Card 渲染它们即可。这里，我们将使用React 的React.Children API。React.Children 提供了一个实用程序，用于处理 children 属性所具有的不透明数据结构。如果 children 属性是一个数组，它将为数组中的每个子组件返回一个函数。如果 child 是null或undefined，则此方法将返回null或undefined。

return 语句中的 div 元素用于为卡片添加样式，在该 div 内部，我们仅返回所有子组件。我们还可以根据需求添加更多功能。

通过这种方式，你可以创建任何包含多个子组件或模块的组件。虽然创建一个组件并在其中添加所有子组件功能很容易，但这种方式创建组件会大大提高代码的可读性。因此，根据具体用例，我们可以在应用程序中使用此模式。

如果您曾经尝试创建这样的子组件，或者觉得可以以更好的方式完成，请在评论中与我分享您的方法！

如果您喜欢我的文章，您还可以通过Twitter与我联系或给我买杯咖啡。

继续学习！