官方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>
感谢this question,我知道我可以像在javascript中一样使用函数组件来创建这个结构:
const Card = ({ children }) => <>{children}</>
const Body = () => <>Body</>
Card.Body = Body
export default Card
使用TypeScript,我决定添加相应的类型:
const Card: React.FunctionComponent = ({ children }): JSX.Element => <>{children}</>
const Body: React.FunctionComponent = (): JSX.Element => <>Body</>
Card.Body = Body // <- Error: Property 'Body' does not exist on type 'FunctionComponent<{}>'
export default Card
问题是现在TypeScript不允许赋值Card.Body = Body
,并给予我错误:
类型“FunctionComponent<{}>”上不存在属性“Body”
那么我怎样才能正确地输入它,才能使用这个代码结构呢?
5条答案
按热度按时间xmjla07d1#
或者更可读:
fcg9iug32#
我发现了一种使用
Object.assign
使点符号与ts一起工作的简洁方法。有一些用例类似于其中ts将抛出错误。我的基本工作解决方案是:
唯一的缺点是,虽然结果将被类型检查,但对象参数中的各个子组件将不会被类型检查,这可能有助于调试。
一个好的做法是预先定义(和类型检查)参数。
但是由于
Object.assign
是泛型的,所以这也是有效的:当然,如果你不需要(或者不想)事先显式地指定类型,你也可以这样做,它只会被推断出来。不需要讨厌的黑客。
2vuwiymt3#
在花了很多时间弄清楚如何在
forwardRef
组件中使用点表示法之后,这是我的实现:卡体组件:
卡组件:
在你的代码中使用它会看起来像这样:
🚀奖励功能🚀
如果您需要特定的订单:
!!!如果
children
不存在,则在尝试添加CardBody组件以外的任何其他组件时,您将收到错误。这个用例非常具体,尽管有时可能很有用。你当然可以继续添加组件(页眉,页脚,图像等)
zmeyuzjn4#
在这种情况下,如果子组件类型发生变化,使用
typeof
可以保存一些重构时间:https://www.typescriptlang.org/docs/handbook/2/typeof-types.html
rn0zuynd5#
对于纯React函数组件,我是这样做的:
如何使用
组件层次结构
编码
最后一个组件,如
Text.tsx
,应该是这样的:index.tsx
:src/components/index.tsx
src/components/Inputs/index.tsx
src/components/Inputs/components/index.tsx
src/components/Inputs/components/Text/index.tsx
这就是如何仅使用ES6导入/导出实现点表示法