随笔分类 - React
摘要：This is ReactNode: type ReactNode = | ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined This is React.ReactEle
阅读全文
摘要：export = React; export as namespace React; declare namespace React { // // React Elements // type ElementType<P = any> = { [K in keyof JSX.IntrinsicEl
阅读全文
摘要：import { DependencyList, useMemo, useState } from "react"; import { Equal, Expect } from "../helpers/type-utils"; const useCustomState = <TValue>(init
阅读全文
摘要：import { useState } from "react"; import { Equal, Expect } from "../helpers/type-utils"; type UseStateReturnValue<T> = { value: T; set: React.Dispatch
阅读全文
摘要：import { useEffect, useState } from "react"; export type Result<T> = | ["loading", undefined?] | ["error", Error] | ["success", T]; export const useDa
阅读全文
摘要：import React from "react"; import { Equal, Expect } from "../helpers/type-utils"; const createRequiredContext = <T extends any>() => { const context =
阅读全文
摘要：// Problem import { useState } from "react"; import { Equal, Expect } from "../helpers/type-utils"; export const useId = (defaultId: string) => { cons
阅读全文
摘要：import { Equal, Expect } from "../helpers/type-utils"; interface Button<T> { value: T; label: string; } interface ButtonGroupProps<T> { buttons: Butto
阅读全文
摘要：import { ReactNode } from "react"; import { Equal, Expect } from "../helpers/type-utils"; interface TableProps<T> { rows: T[]; renderRow: (row: T) =>
阅读全文
摘要：interface TableProps<T> { rows: T[]; renderRow: (row: T) => ReactNode; } export class Table<T> extends React.Component<TableProps<T>> { render(): Reac
阅读全文
摘要：export const Table = <T>(props: TableProps<T>) => { return ( <table> <tbody> {props.rows.map((row) => ( <tr>{props.renderRow(row)}</tr> ))} </tbody> <
阅读全文
摘要：import { ComponentProps } from "react"; import { Equal, Expect } from "../helpers/type-utils"; const buttonProps = { type: "button", // @ts-expect-err
阅读全文
摘要：const presetSizes = { xs: "0.5rem", sm: "1rem", }; type Size = keyof typeof presetSizes; //type LooseSize = Size | string; // the result will be strin
阅读全文
摘要：import React, { forwardRef } from "react"; // Declare a type that works with generic components type FixedForwardRef = <T, P = {}>( render: (props: P,
阅读全文
摘要：React set the ref to null in runtime. It is a limitation now for react. import { useRef } from 'react'; export const Component = () => { const ref = u
阅读全文
摘要：// Imagine NavBar is an external library! export const NavBar = (props: { title: string; links: string[]; children: React.ReactNode; }) => { return <d
阅读全文
摘要：Using Omit import { ComponentProps } from 'react'; import { Equal, Expect } from '../helpers/type-utils'; export const Input = ( props: Omit<Component
阅读全文
摘要：Relevant for components that accept other React components as props. export declare interface AppProps { children?: React.ReactNode; // best, accepts
阅读全文
摘要：Blog: https://www.totaltypescript.com/react-component-props-type-helper Get any Prop type from html element: import { ComponentProps } from "react"; t
阅读全文
摘要：ProductCard component import './ProductCard.css'; import { ReactNode } from 'react'; import * as React from 'react'; import ProductCardContext from '.
阅读全文
