Issue
How can I extend in SolidJS props of some existing JSX element and create my custom interface like this ButtonProps
interface in the given below example for 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>
);
};
Solution
In very much the same way, except you need to avoid destructuring for reactive properties and use splitProps instead, so your example would translate to:
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>
);
};
As you can see, the types of the intrinsic element attributes are in JSX, coming from the jsx-dom-expressions that convert JSX to reactive expressions in solid.
Answered By - lexLohr
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.