reactjs React Typescript，在使用组件库的应用程序中设置组件的props接口值

y4ekin9u 于 2023-01-30 发布在 React

关注(0)|答案(1)|浏览(141)

我目前正在使用Turborepo开发一个位于monerepo中的NextJs项目，在这个repo中，我们的主应用程序位于/app目录中，共享代码位于/packages目录中。
在packages目录中，有一个ui文件夹，里面保存着我们的组件库。
这些组件使用 typescript ，因此我们在使用它们时可以自动完成组件的属性。
当前的一个缺点是多个应用程序应当能够使用UI库，并且那些不同的应用程序还具有不同的主题/配色方案。
我想要实现的是，当我在ui库中定义一个类型时：

type Colors = any

并在需要为Color使用类型的组件的 prop 上使用此类型。

export const ComponentA = ({ color: Colors }) => (<div>This component is located inside of the ui-library</div>)

然后，我将在使用该库的应用程序中重写此类型

type Colors = 'red' | 'blue'

因此，当我使用特定应用程序内部库中的组件时：

import { ComponentA } from 'ui-library'

并使用组分A：

<ComponentA color=''/>

我会得到打字的颜色与建议的红色或蓝色。因为我设置这些在这个特定的应用程序。

reactjs

来源：https://stackoverflow.com/questions/75270565/react-typescript-set-props-interface-value-of-a-component-from-component-librar

1条答案

按热度按时间

hl0ma9xz1#

这是一个例子：

export interface Color {
  color: 'red' | 'blue'
}

export const ComponentA = ({color} : Color) => (<div>This component is located inside of the ui-library</div>)

如果要使用默认值：

export const ComponentA = ({color = "red"} : Color) => (<div>This component is located inside of the ui-library</div>)

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs React Typescript，在使用组件库的应用程序中设置组件的props接口值

1条答案

相关问题

热门标签

最新问答