带有switch语句的React按钮组件



大家都在尝试制作一个按钮组件,在改变道具时转换为anchor标签。我使用switch声明,但当我改变道具和onClick未被处理时,没有任何变化?我使用NextJS的Link组件的anchor标签

const Button = ({ children }, props) => {
switch (props.as) {
case 'link':
return (
<Link
href={props.link}
onClick={props.click}
className={styles.hello}>
{props.icon && <FontAwesomeIcon icon={props.icon} />}
{children}
</Link>
);
case 'button':
return (
<button
onClick={props.click}
type='button'
className={styles.btn}>
{props.icon && <FontAwesomeIcon icon={props.icon} />}
{children}
</button>
);
default:
return (
<button
onClick={props.click}
type='button'
className={styles.btn}>
{props.icon && <FontAwesomeIcon icon={props.icon} />}
{children}
</button>
);
}
};

在我的Parent组件中,我导入了Button,并使用它:

<Button
as='link'
icon='coffee'
click={props.handleAccept}>
RSVP
</Button>

在渲染中显示一个按钮而不是预期的锚标记。有什么想法吗?

const Button = ({ children, ...props }) => {

应该是这样的,props不是第二个参数

当声明Button组件时,尝试像这样将props移动到解构对象中…在它前面。

const Button = ({children,…Props}) =>{.......};

相关内容

  • 没有找到相关文章

最新更新