typescript React.HTMLProps的固体JS等效物< ...>

zzlelutf  于 2022-12-27  发布在  TypeScript
关注(0)|答案(2)|浏览(123)

我有一个React组件,其 prop 类型如下:

type Props = React.HTMLProps<HTMLAnchorElement> & {
    to?: string;
};

如何在SolidJS中编写等价的prop类型?我尝试了以下方法:

type Props = Component<HTMLAnchorElement> & {
    to?: string;
};

而且它编译,但是它没有和前者一样的内置 prop 比如children

dgsult0t

dgsult0t1#

Solid JS具有JSX.IntrinsicElements,它提供按标记名索引的属性类型:

import { JSX } from 'solid-js';

type Props = JSX.IntrinsicElements['a'] & {
    to?: string;
};
7rtdyuoh

7rtdyuoh2#

您可以使用JSX.HTMLAttributes<T>

interface Props extends JSX.HTMLAttributes<HTMLAnchorElement> {}

当你需要像我们在React中所做的那样用额外的属性来扩展一些元素时,这就很方便了:

export interface Props extends JSX.HTMLAttributes<HTMLInputElement> {
  value: Accessor<string>;
  onInput: JSX.EventHandler<HTMLInputElement, InputEvent>;
  icon?: HTMLImageElement;
  label?: HTMLImageElement,
}

const Input: Component<Props> = (props) => {
  const [_, ...rest] = splitProps(props,  ['icon', 'label']);

  const handleInput: JSX.EventHandlerUnion<HTMLInputElement, InputEvent> = (event) => {}

  return (
    <span class={style.wrapper}>
      {props.icon && props.icon}
      {props.label && props.label}
      <input {...rest} value={props.value()} onInput={handleInput} />
    </span>
  )
};

相关问题