大家都在尝试制作一个按钮组件,在改变道具时转换为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}) =>{.......};