Javascript 对函数组件使用点表示法

ReactJs官方文档建议按照与库类似的步骤创建组件：

卡片标题
一些快速的示例文本构建在卡片标题上，并构成大部分
卡片的内容。

在类组件的帮助下，创建此结构非常容易：

constcardbody=（{children}）=>{children}；
类卡扩展组件{
静态体=万向节体；
render（）{
返回(
{this.props.children}
);
}
}

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

如果我遵循，我就不能再将

卡

用作组件，因为他现在是组件的对象：

const卡={
组件：CardComponent，
正文：CardBody
}
导出默认卡

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

...

---

你知道怎么做吗？

在函数组件中，你可以这样做：

// 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
const Card=（{children}）=>{children}；
const Body=（）=>Body；
卡体=卡体；
导出默认卡；
//用法
从“/Card.react.js”导入卡片；
常量应用=（）=>(
);

您只需执行以下操作即可-

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

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

constcardbody=（{children}）=>{children}；
康斯特卡=（道具）=>(
{props.children}
);
Card.Body=CardBody

然后像这样使用它

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

....

似乎可以很好地使用javascript。但是我使用的是typescript，这一个给了我一个很好的错误：

属性“Body”在类型“FunctionComponent”上不存在
FunctionComponent
是
Card
的类型，声明如下
const Card:React.FunctionComponent=…
@johannchopin这是一个不同的问题，你应该问：
是的，我在问题中没有提到typescript，所以我会问一个新的；）对于看到这个问题并在TypeScript中键入代码时遇到困难的好奇者，您可以看看这个问题：谢谢您的回答，这只是验证时间的问题，但我在您的时间里对您的答案进行了投票：）人们往往忘了JS中的
类
只是普通函数的语法糖。