typescript +SolidJS : how can I extend props of some JSX element?

Question

如何扩展一些现有 JSX 元素的 SolidJS props 并创建我的自定义界面，如下面给出的 React 示例中的 ButtonProps 界面。

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  showIcon: boolean;
}

const Button: React.FC<ButtonProps> = ({ title, showIcon, ...props }) => {
  return (
    <button {...props}>
      {title}
      {showIcon && <Icon/>}
    </button>
  );
};

Answer 1

以非常相同的方式，除了您需要避免对 react 性属性进行解构并改用 splitProps，因此您的示例将转换为:

import { splitProps, JSX } from 'solid-js';

interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  // better make that optional, so you can use Button without having to
  // add the showIcon attribute:
  showIcon?: boolean;
}

const Button = (props: ButtonProps) => {
  const [local, buttonProps] = splitProps(props, ['title', 'showIcon']);
  return (
    <button {...buttonProps}>
      {local.title}
      {local.showIcon && <Icon/>}
    </button>
  );
};

如您所见，内在元素属性的类型在 JSX 中，来自将 JSX 转换为实体响应式(Reactive)表达式的 jsx-dom-expressions。