分组特定子组件 React

Question

目前我正在尝试像这样使用 React 呈现信息卡：

import React from 'react'
import styled from 'styled-components';
import PropTypes from 'prop-types';

const StyledInfoCard = styled.div`
 display: flex;
 align-items: center;
 flex-wrap: wrap;

 figure {
  margin: 0 1.5rem 0 0;
 }
`;

 const InfoCard = ({ children }) => <StyledInfoCard>{children}</StyledInfoCard>;

InfoCard.propTypes = {
 children: PropTypes.string.isRequired
};

/**
 * @component
 */
export default InfoCard;

子元素包含三个组件：

<InfoCard>
 <Avatar alt="profile image Jonathan" source="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
 <Title size='xSmall' text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
 <subTitle size='xSmall' text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
</InfoCard>

我的目标是像这样渲染组件：

<div>
 <figure>
  <img .../>
 </figure>
 <div>
  <h2>....</h2>
  <h3>.....</h3>
 </div>
</div>

所以子组件包含一个包装器，除了<avatar> 组件

有什么想法吗？

Answer 1

假设每个子组件 Avatar、Title 和 subTitle 都由单个节点组成，这不应该吗：

<InfoCard>
  <Avatar
    alt="profile image Jonathan"
    source="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
  />
  <div>
    <Title size="xSmall" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
    <subTitle size="xSmall" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
  </div>
</InfoCard>

如果你想保持传递children的结构，那么你可以修改InfoCard：

const InfoCard = ({ children }) => {
  const containedNodes = [];
  const outerNodes = [];
  React.Children.forEach(children, child => {
    if (child.type === Avatar) {
      outerNodes.push(child);
    } else {
      containedNodes.push(child);
    }
  });
  return (
    <StyledInfoCard>
      {outerNodes}
      <div>{containedNodes}</div>
    </StyledInfoCard>
  );
};