nodejs 014: React.FC 与 Evergreen(常青树) React UI 框架的的Dialog组件

React.FC

• React.FC是React中用于定义函数组件“Function Component”的类型。它代表，可以帮助你在TypeScript中提供类型检查和自动补全。使用React.FC时，可以明确指定组件的props类型，并且它会自动推导children属性。下面是一个使用 React.FC 定义函数组件的示例：

import React from 'react';interface MyComponentProps {title: string;count: number;
}// 用React.FC声明一个函数组件
const MyComponent: React.FC<MyComponentProps> = ({ title, count, children }) => {return (<div><h1>{title}</h1><p>Count: {count}</p>{children}</div>);
};// 使用示例
const App: React.FC = () => {return (<MyComponent title="Hello World" count={5}><p>This is a child element!</p></MyComponent>);
};export default App;

• 使用效果：
  

Evergreen(常青树) 的Dialog组件声明

• Evergreen代码中export declare const Dialog: React.FC<DialogProps> 定义了一个 React 函数组件 Dialog，该组件使用 DialogProps 接口定义的属性。这使得开发者在使用该组件时，可以根据需要传入相应的属性，以实现不同的功能和样式。

// 这段代码定义了一个 TypeScript 接口 `DialogProps`，它描述了一个对话框（Dialog）组件的所有可配置属性。
export interface DialogProps {// children: 可以是字符串、React 节点或一个接受 `{ close }` 参数的函数。若为字符串，则用 `<Paragraph />` 包裹children?: React.ReactNode | (({ close }: { close: () => void }) => void)// The intent of the Dialog. Used for the button. Defaults to none.intent?: IntentTypes// 一个布尔值，指示对话框是否显示。默认为 `false`isShown?: boolean// 对话框的标题 Title of the Dialog. Titles should use Title Case.title?: React.ReactNode// When true, the header with the title and close icon button is shown.Defaults to true.hasHeader?: boolean// 自定义的头部内容，可以是 React 节点或接受 `{ close }` 参数的函数。header?: React.ReactNode | (({ close }: { close: () => void }) => void)// When true, the footer with the cancel and confirm button is shown.Defaults to truehasFooter?: boolean// You can override the default footer with your own custom component.footer?: React.ReactNode | (({ close }: { close: () => void }) => void)// When true, the cancel button is shown. Defaults to true.hasCancel?: boolean// When true, the close button is shown. Defaults to true.hasClose?: boolean// 当退出过渡完成时调用的函数。onCloseComplete?: () => void// **onOpenComplete**: 当进入过渡完成时调用的函数。onOpenComplete?: () => void// **onConfirm**: 当确认按钮被点击时调用的函数，传入一个 `close` 函数，默认行为是关闭对话框。onConfirm?: (close: () => void) => void// **confirmLabel**: 确认按钮的标签，默认为“Confirm”。confirmLabel?: string// When true, the confirm button is set to loading. Defaults to false.isConfirmLoading?: boolean// When true, the confirm button is set to disabled. Defaults to false.isConfirmDisabled?: boolean// Function that will be called when the cancel button is clicked.This closes the Dialog by default./onCancel?: (close: () => void) => void// **cancelLabel**: 取消按钮的标签，默认为“Cancel”。cancelLabel?: string// Boolean indicating if clicking the overlay should close the overlay.Defaults to true.shouldCloseOnOverlayClick?: boolean// Boolean indicating if pressing the esc key should close the overlay.Defaults to true.shouldCloseOnEscapePress?: boolean// Width of the Dialog.width?: string | number// The space above the dialog. topOffset?: string | number// The space on the left/right sides of the dialog when there isn't enough horizontal space available on screen.sideOffset?: string | number// The min height of the body content.Makes it less weird when only showing little content.minHeightContent?: string | number// Props that are passed to the dialog container.containerProps?: React.ComponentProps<typeof Pane>// Props that are passed to the content container.contentContainerProps?: React.ComponentProps<typeof Pane>// Whether or not to prevent scrolling in the outer body. Defaults to false.preventBodyScrolling?: boolean
}export declare const Dialog: React.FC<DialogProps>

Dialog组件示例代码

• https://evergreen.segment.com/components/dialog

import React from "react";
import ReactDOM from "react-dom";
import { Pane, Dialog, Button } from "evergreen-ui";function DefaultDialogExample() {//使用数组解构赋值来定义一个状态变量和更新函数const [isShown, setIsShown] = React.useState(false);return (<Pane><DialogisShown={isShown}title="Dialog title"onCloseComplete={() => {setIsShown(false);}}confirmLabel="Custom Label">Dialog content</Dialog><ButtononClick={() => {setIsShown(true);}}>Show Dialog</Button></Pane>);
}ReactDOM.render(<DefaultDialogExample />, document.getElementById("root"));

CG

• UI-Box是一个基于React的低级别组件库。Evergreen(常青树) 的Button等组件通过BoxComponent实现，代码需要 import { extractStyles as boxExtractStyles, BoxProps, BoxComponent, PolymorphicBoxProps } from 'ui-box'