React props 可选的传播属性

如何解决React props 可选的传播属性

我正在尝试在 React 组件之间提供多个可选属性。

示例：

File: GenericCard.js

...
<Reactstrap.CardHeader {...this.props.headerArgs}>{this.props.cardheader}</Reactstrap.CardHeader>
<Reactstrap.CardBody {...this.props.bodyArgs}>{this.props.cardbody}</Reactstrap.CardBody>
<Reactstrap.CardFooter {...this.footerargs}>{this.props.cardfooter}</Reactstrap.CardFooter>
...

我将 props 传递给这个组件，如下所示：

File: SpecificCard.js

<GenericCard cardheader={header} cardbody={body} cardfooter={footer} {...bodyArgs} />

例如一个不同的变体是：

File: DifferentCard.js

<GenericCard cardheader={header} cardbody={body} cardfooter={footer} {...headerArgs} {...footerargs} />

但是这样的语法会为我提供：

Uncaught ReferenceError: {the attribute that's missing} is not defined

意思是，我希望能够使用传播参数为不同的属性传递多个选项，如果它们没有被定义，我希望道具忽略它们（因为我 understand普通道具的情况？）。

我想设置一个默认值，但我似乎找不到如何实现。

任何帮助将不胜感激。

---

编辑：

我尝试按照@Stevetomlin 的建议替换我的代码：

File: SpecificCard.js

{...{...headerArgs,...bodyArgs,cardbody: body,cardheader: header}}

在进行一些调试后，我意识到问题在于传播变量传递的是属性本身而不是变量，这意味着在 GenericCard.js 上接收时我无法区分不同的变量。代码说明：

File: SpecificCard.js

const body = <div>a</div>;
const bodyArgs = {attributeA: 'a',attributeB: 'b',attributeC: 'c'};

当我在 GenericCard.js 收到它时，道具看起来像：

cardbody: "<div>a</div>"
attributeA: 'a'
attributeB: 'b'
attributeB: 'c'

所以我没有将 bodyArgs 作为道具而是它的属性。

我将史蒂夫的建议调整为如下所示：

{...{headerArgs: headerArgs,bodyArgs: bodyArgs,footerargs: footerargs,cardheader:header,cardbody:body,cardfooter:footer}}

然后工作正常，但需要在父组件上定义所有变量，这不是我的目标。我正在寻找的是一种完全做到这一点的方法，但不必定义空变量（同样，正如我在上面的链接中所理解的那样，React 可以工作）。像这样的东西应该在解决方案中工作，就像上面的代码一样：

{...{headerArgs: headerArgs,cardfooter:footer}}

这种道具行为可以吗？我怎样才能做到这一点？儿童道具不应该忽略丢失的道具吗？如果没有，我可以在子组件上设置默认值吗？