React JSX 有选择地将属性传递给组件

Question

这段代码有效，但我不禁认为有更好的方法。 我无法将扩展设置为 false，因为我这样做时组件会中断（就像他们在Set JSX attribute based on another JSX attribute react 中所做的那样）

另外，我需要添加更多条件分支，这意味着代码重复

if (itemProps.Expanded == true) {
  return (
    <Accordion expanded={true}>
    ...
    </Accordion >
  )
}
else {
  return (
    <Accordion>
    ...
    </ Accordion>
  )
}

有什么建议？

Answer 1

您可以动态创建道具对象并使用 ...(spread) 传递道具

const props = itemProps.Expanded == true ? { expanded: true } : {};
return <Accordion {...props}>...</Accordion>;

Answer 2

对不起，伙计们试过这个，它奏效了。 感谢您的时间

let expanded = undefined;
if (itemProps.Expanded) {
  expanded = true;
}

return (
    <Accordion expanded={expanded}>
    ...
    </Accordion >
)
```