React Typescript 中的依赖道具

一个依赖的道具 是一个 prop，只有在另一个 prop 具有特定值时才应设置。

在下面的示例中，我们可以看到一个用例（单击[ 打开沙盒](https://codesandbox.io/s/dependent-props-in-react-typescript-3txhlb?file=/src/App.tsx) 查看代码）：

在这里，我们有两个相同通用卡的选项。

• Card1——有 只要 两个道具： 标题 , 描述
• Card2——有 只要 两个道具： 标题 , 页脚

为了在编写通用组件时使用 typescript 的全部功能，我们需要为 typescript 提供我们可以接受的特定选项。

我们可能会认为通过 卡1 |卡2 到 道具 type 就足够了，但是当我们这样做时，打字稿会向我们显示以下错误：

那是因为我们只能拥有 非此即彼 ，所以如果我们当前正在渲染 卡1 那么我们将没有 页脚 prop，反之亦然，当我们渲染时 卡2 我们不会有 描述 支柱。

为了解决这个问题，我们仍然需要将缺失的道具传递为 绝不 ( 不明确的 也可以，但是 绝不 表示该道具永远不会发生）。

我们可以像这样手动完成：

但更简洁的方法是创建一个实用程序类型，如下所示：

这 _绝不_ util 获取每个道具并制作其类型 _绝不_ .

它允许 ** 可扩展的** 代码。
自然，组件从很小的地方开始，直到产品/UX 团队希望它成为 少量 不同的…

通过做所有这些，我们使用通用组件获得了更好的体验——当我们不正确地使用它时，typescript 会抛出错误，（例如，同时传递 页脚 和 描述 - 不可能的情况）。

这可以保护我们，开发人员，避免混淆两张独立（但相似）的卡片。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39044/39432411