solid js - Typescript+SolidJS: hur kan jag utöka props för någon JSX-element?

Hur kan jag i SolidJS utöka props för ett befintligt JSX-element och skapa mitt egna gränssnitt som detta ButtonProps-gränssnitt i exemplet nedan för React.

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>
  );
};

Svar #1

Så här brukar jag göra det:

import type { Component, JSX } from "solid-js";
import { splitProps } from "solid-js";

export type ButtonProps = {
  title: string;
  showIcon: boolean;
} & JSX.HTMLAttributes<HTMLButtonElement>;

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

Jag använde en typintersection i mitt exempel, men du kan göra samma sak genom att utöka gränssnittet.

Jag använder Component-typen här, som som standard också lägger till en valfri children-prop till props, även om jag tror att det kommer att förändras med 1.4-utgåvan.

Jag använder också splitProps-metoden för att hjälpa till att undvika destructuring, så att de reaktiva uppdateringarna av prop-värdena bevaras.

Svar #2

På ungefär samma sätt, förutom att du behöver undvika destrukturering för reaktiva egenskaper och istället använda splitProps, så skulle ditt exempel översättas till:

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>
  );
};

Som du kan se, typerna av de inbyggda elementens attribut är i JSX, och kommer från jsx-dom-expressions som konverterar JSX till reaktiva uttryck i Solid.

Relaterade artiklar