React Typescript 语法

1. Children
2. Events
3. Styles
4. Refs

Children

interface Props {
     
  children?: React.ReactNode
}

Events

interface Props {
     
  // 事件对象
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void
}

props对象中用buttonProps对象作为button的属性

interface Props {
     
  buttonProps?: JSX.IntrinsicElements['button']
}

const Container = ({
      buttonProps }: Props) => (
  <div>
    <button {
     ...buttonProps}></button>
  </div>
)

整个props对象都作为button的属性

interface Props extends JSX.IntrinsicElements['button'] {
     }
const ExtendedButton = (props: Props) => (
  <button {
     ...props} />
)

Styles

// utils.d.ts
declare interface StyleProps {
     
  style?: React.CSSProperties
  className?: string
}

// Button.tsx
interface ButtonProps extends StyleProps {
     
  label: string
}

const Button = ({
      label, ...styleProps }: ButtonProps) => (
  <button {
     ...styleProps}>{
     label}</button>
)

Refs

const liRef = useRef<HTMLLIElement>(null)
Other refs are possible too:
const valueRef = useRef<number>(0)

在Typescript使用函数组件

export interface Props {
     
  defaultCount: number
}
export default function MyCounter({
      defaultCount = 0 }: Props): React.ReactElement {
     
  const [count, setCount] = React.useState<number>(defaultCount);

  const incrementCount = () => {
     
    setCount(count + 1);
  }
  return <button onClick={
     incrementCount}>Example - count: {
     count}</button>
}

函数组件是箭头函数

const MyComponent: React.FC<Props> = ({
      value }) => <div>Syntax</div>

在Typescript使用类组件

interface Props {
     
  value: number
}
interface State {
     
  text: string
}
class MyComponent extends React.Component<Props, State> {
     
  static defaultProps: Props = {
     
    value: 0
  }
  state: State = {
      text: 'Example' }

  render() {
     
    return <div>Syntax {
     this.props.value} {
     this.state.text}</div>
  }
}

为了描述“children”，我更喜欢使用React.FC泛型类型。

interface AnotherSpecificProps {
     }
const AnotherComponent: React.FC<AnotherSpecificProps> = ({
      children }) => {
     };

// even with omitted props it's still working
const Component: React.FC = ({
      children }) => {
     };

有时我需要向嵌套组件传递额外的props，你也可以用部分>来包装它。

ComponentProps {
     
  prop: boolean;
  propAnother: string;
}
const Component: React.FC<ComponentProps> = ({
     prop, propAnother}) => {
     
  return (
    <div>
      {
     prop && propAnother}
    </div>
  );
};

interface ComplexComponentProps {
     
  componentProps?: Partial<React.ComponentProps<typeof Component>>
}
const ComplexComponent: React.FC<ComplexComponentProps> = ({
     componentProps}) => {
     
  return (
    <div>
      <Component prop={
     true} propAnother="string" {
     ...componentProps} />
    </div>
  );
};

// somewhere else
<ComplexComponent />
<ComplexComponent componentProps={
     {
     prop: false}} />
// without Partial you should pass all required props, so Partial is very useful

React.ComponentProps 看起来特别有用，可用于向下传递props而无需导入子组件的Props接口。

了解更多