将点表示法与功能组件一起使用

Question

ReactJs 官方文档建议在 dot notation 之后创建组件，例如 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>
    );
  }
}

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

如果我关注this way，我将无法再将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>
);

---

或者，您可以利用命名导出：

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

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

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

Answer 2

对于功能组件

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

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

然后像这样使用它

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