使用带功能组件的点表示法

Question

官方 ReactJs 文档建议按照点符号创建组件，如React-bootstrap库：

<Card>
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
  </Card.Body>
</Card>

借助类组件很容易创建此结构：

const CardBody = ({ children }) => <div className='body'>{children}</div>;

class Card extends Component {
  static Body = CardBody;

  render() {
    return (
      <div className='card'>{this.props.children}</div>
    );
  }
}

但也建议尽可能多地使用功能组件。不幸的是，我不知道如何仅使用功能组件来实现这一点。

如果我按照这种方式，我就不能再Card用作组件了，因为他现在是组件的对象：

const Card = {
  Component: CardComponent,
  Body: CardBody
}

export default Card

我必须那样使用它，这不是我真正想要的：

<Card.Component>
  <Card.Body>
  ...

你知道怎么做吗？

Answer 1

在功能组件中，您可以这样做：

// Card.react.js
const Card = ({ children }) => <>{children}</>;
const Body = () => <>Body</>;

Card.Body = Body;

export default Card;

// Usage
import Card from "./Card.react.js";

const App = () => (
  <Card>
    <Card.Body />
  </Card>
);

Answer 2

使用函数组件和 TypeScript

// Card.tsx
const CardRoot = ({ children }) => <div>{children}</div>;
const CardBody = () => <>Body</>;

export const Card = CardRoot as typeof CardRoot & {
  Body: typeof CardBody;
};
Card.Body = CardBody;

并像这样使用：

import { Card } from "./Card";

const App = () => (
  <Card>
    <Card.Body />
  </Card>
);

Answer 3

你可以简单地做 -

const CardBody = ({ children }) => <div className='body'>{children}</div>;

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

然后像这样使用它

<Card>
  <Card.Body>
   ....