插槽

npm install @radix-ui/react-slot

import { Slot } from "radix-ui";

export default () => (
	<Slot.Root>
		<div>Hello</div>
	</Slot.Root>
);

// your-button.jsx
import * as React from "react";
import { Slot } from "radix-ui";

function Button({ asChild, ...props }) {
	const Comp = asChild ? Slot.Root : "button";
	return <Comp {...props} />;
}

// your-button.jsx
import * as React from "react";
import { Slot } from "radix-ui";

function Button({ asChild, children, leftElement, rightElement, ...props }) {
	const Comp = asChild ? Slot.Root : "button";
	return (
		<Comp {...props}>
			{leftElement}
			<Slot.Slottable>{children}</Slottable>
			{rightElement}
		</Comp>
	);
}

import { Button } from "./your-button";

export default () => (
	<Button asChild>
		<a href="/contact">Contact</a>
	</Button>
);

import { Slot } from "radix-ui";

export default () => (
	<Slot.Root
		onClick={(event) => {
			if (!event.defaultPrevented)
				console.log("Not logged because default is prevented.");
		}}
	>
		<button onClick={(event) => event.preventDefault()} />
	</Slot>
);