javascript - 将 prop 动态添加到 React 组件数组中的最后一个元素

Question

这是我到处搜索的问题，但我找不到解决方案，因为我无法编辑 props 对象。

这就是目前正在做的事情。我们有一个菜单。在此菜单中，我们有子部分。目前我们通过以下方式实现这一目标:

const firstSectionItems = [];
const secondSectionItems = [];
firstSectionItems.push(
  <MenuItem
    onClick={() => {}}
  />,
  <MenuItem
    onClick={() => {}}
  />,
  <MenuItem
    onClick={() => {}}
    sectionEnd
  />
);
secondSectionItems.push(
  <MenuItem
    onClick={() => {}}
  />,
  <MenuItem
    onClick={() => {}}
  />,
  <MenuItem
    onClick={() => {}}
    sectionEnd
  />
);

const items = [...firstSectionItems, ...secondSectionItems];

sectionEnd 属性在菜单项之后添加一个分隔符，以将菜单中的部分分开。但是如果有人添加了一个菜单项呢？他们必须确保他们移动了 sectionEnd Prop 。我想要做的是将这个 sectionEnd 添加到每个数组最后一个元素的组件中。这可能吗？如果是，怎么办？

Answer 1

在我看来，最好使用数组，然后使用 .map 并管理数组中的对象(普通)作为构建项目的描述:

let firstItems = [{ onclick: () => {}},{ onclick: () => {}}];

然后，在 JSX 中:

{ firstItems.map((item, index) => (
    <MenuItem
       onClick={item.onClick}
       sectionEnd={index === firstItems.length - 1} 
   />
  ))
}

因此，您可以使用普通的对象和属性数组而不是实例化的 JSX 元素来更改属性。