插槽

npm install @radix-ui/react-slot

import { Slot } from "radix-ui";

export default () => (
	<Slot.Root>
		<div>你好</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}</Slot.Slottable>
			{rightElement}
		</Comp>
	);
}

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

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

import { Slot } from "radix-ui";

export default () => (
	<Slot.Root
		onClick={(event) => {
			if (!event.defaultPrevented)
				console.log("未记录，因为默认被阻止。");
		}}
	>
		<button onClick={(event) => event.preventDefault()} />
	</Slot.Root>
);