ReactJS 在映射对象数组时传递父属性

Question

我正在处理一个映射数组的组件。 我需要通过映射向下传递一个道具，但我正在努力这样做，因为我找不到将父 uuid 作为映射参数调用的方法

我的阵列看起来像这样：

let location = {
    contact: { first_name: "Tom", last_name: "Tomson" },
    name: "Location One",
    uuid: 1111,
    departments: [
      {
        contact: { first_name: "James", last_name: "Potter" },
        name: "Department One",
        uuid: "AAA",
        subdepartments: [
          {
            contact: { first_name: "Lord", last_name: "Voldemort" },
            name: "Subdepartment Unit 1",
            uuid: "A1A1"
          }
        ]
      },
      {
        name: "Food Department",
        uuid: "BBB",
        subdepartments: [
          {
            name: "Food Subdepartment Unit 1",
            uuid: "B1B1"
          }
        ]
      }
    ]
  };

我想要做的是映射部门数组并将 location.uuid 作为属性传递。

这是我的映射函数：

{location.departments.map((department, key, {location.uuid}) => {
   return (
     <div>
         <button
            id="department-tab-button"
            name={department.name}
         >
         {location.uuid}
         </ button >
         {department.subdepartments.map((subdepartment, key, {department.uuid}) => {
             return (
                <button>
                   {department.uuid}
                </button>
             )
         })}
    })}

我的问题是我无法通过映射函数传递 department.uuid。 我希望子部门按钮显示其父部门的 uuid。

Answer 1

其实你已经做到了。 只是你的语法不正确。

return location.departments.map((department) => (
  <div>
    <button id="department-tab-button" name={department.name}>
      {location.uuid}
    </button>
    {department.subdepartments.map(() => <button>{department.uuid}</button>)}
  </div>
));

Answer 2

你读过地图运算符吗？

地图运算符接收三个参数：

array.map(function(currentValue, index, arr), thisValue)

{department.subdepartments.map((subdepartment, index, array) => {
     // subdepartment here is an item in department.subdepartments
     // index here is index of subdepartment inside department.subdepartments
     // array here is department.subdepartments
     // so, if you define {department.uuid} instead array here, it is wrong
     return (
         <button>
             {department.uuid}
         </button>
     )
})}

所以，在你的情况下，应该是：

{location.departments.map((department, index, arr) => {
   return (
     <div>
         <button
            id="department-tab-button"
            name={department.name}
         >
         {location.uuid}
         </ button >
         {department.subdepartments.map(() => {
             return (
                <button>
                   {department.uuid}
                </button>
            )
        })}
    </div>
})}