<div> 仅当定义了道具时才显示

Question

我只想在React组件已定义的情况下显示它的图标。这是我的代码：

export const Button = ({ children, link, icon, background }) => {
return (
<Link href={`${link}`} passHref>
<button
className={`mt-4 inline-flex px-5 py-3 rounded-xl text-base font-medium text-white ${background} hover:bg-indigo-800 active:bg-grey-900 focus:outline-none border-4 border-white focus:border-purple-200 transition-all`}
>
{children}
{this.props.icon ? <Icon path={`${icon}`} /> : null}
</button>
</Link>
);
};

但当我运行它时，我会得到一个"TypeError:无法读取未定义的属性"props"知道怎么修吗？

Answer 1

什么是this.props？您的函数参数在函数签名中被分解为局部变量：

export const Button = ({ children, link, icon, background }) => {

您已经使用了这些局部变量，包括这里的icon：

<Icon path={`${icon}`} />

所以你应该像已经使用它和其他变量一样使用它：

{icon ? <Icon path={`${icon}`} /> : null}

Answer 2

您已经破坏了道具，因此不需要this.props.icon，只需使用icon

Answer 3

由于您使用的是react功能组件，因此.props无关紧要。此适用于Class组件。如果你想了解更多

export const Button = ({ children, link, icon, background }) => {

这个按钮是一个箭头函数(声明函数的另一种方式)，它以道具为参数，但你可以在这里分解道具，这样你就不必使用props.link、props.children等。