在 React 组件中设置默认属性值

Question

尝试为我的某些组件属性设置默认值。做一个简单的字符串或布尔值工作得很好，但我找不到任何显示更复杂的东西的例子。我尝试了一些方法将默认值应用于

prepend

属性，但没有成功：

export default function ListItem({
  hasPrepend = false,
  prepend = { background: "bg-success", icon: { style:"fas", name: "fa-star" } },
  children,
}) {
  return(
    <div>
      {hasPrepend && <div className={`
        ${prepend.background}
        `}
      >
        <Icon style={prepend.icon.style} name={prepend.icon.name} />
      </div>
    }
    <div>
        {children}
    </div>
</div>
);
}

我也尝试过

const defaultPrepend = {
  background: "bg-success",
  icon: {
    style: "fas",
    name: "fa-user",
    size: "fa-lg",
  }
};

export default function ListItem({
...
     prepend = defaultPrepend,
...
}) {

我还接近吗？

Answer 1

使用

:

将变量重新分配给不同的名称。如果您想将 prop 公开为在组件外部更有意义的名称，但在组件内部该名称会导致命名冲突，这非常有用。这是有点奇怪的语法，但你必须使用

=

符号来设置默认值，尽管它是对象的一部分。

这个：

export default function ListItem({
  hasPrepend = false,
  prepend = { background: "bg-success", icon: { style:"fas", name: "fa-star" } },
  children,
}) {

会变成这样：

export default function ListItem({
  hasPrepend = false,
  prepend = { background = "bg-success", icon: { style = "fas", name = "fa-star" } },
  children,
}) {

但是，如果您想将背景属性命名为更具体的名称，例如

buttonBackground

，那就是：

export default function ListItem({
  hasPrepend = false,
  prepend = { background: btnBackground, ...},
  children,
}) {