如何解构嵌套的属性？

Question

我开始学习React js，已经学到了解构props的知识点。通常我们会解构props然后像下面Greet组件的代码一样使用它的属性：

import React from "react";
const Greet = props => {
  const { name, heroName } = props; //here I destructured it
  return (
    <div>
      <h1>
        Hello {name} a.k.a {heroName}
      </h1>{" "}
      // and then use simply name and heroName
    </div>
  );
};
export default Greet;

这是我的应用组件

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Greet from "./components/Greet";
function App() {
  return (
    <div className="App">
      <Greet name="kaptan" heroName=" ek" />
    </div>
  );
}
export default App;

在我继续创建一个名为Person和NameList的组件后，上述代码能够正常工作。以下是我的NameList组件：

import React from "react";
import Person from "./Person";
function NameList() {
  const persons = [
    {
      id: 1,
      name: "kaptan",
      age: 30,
      skill: "react"
    },
    {
      id: 2,
      name: "rinku",
      age: 29,
      skill: "java"
    },
    {
      id: 3,
      name: "ankit",
      age: 39,
      skill: "vue"
    }
  ];
  const personsList = persons.map(person => <Person person={person} />);
  return <div>{personsList}</div>;
}
export default NameList;

这是我的人(Person)组件

import React from "react";
const Person = ({ person }) => {
  // here i need to destructure person object
  return (
    <div>
      <h2>
        I am {person.name},My age is {person.age},I know {person.skill}
      </h2>
    </div>
  );
};
export default Person;

那么我的问题是：为什么在Person组件中我不能像在Greet组件中那样解构呢？

就像这样

import React from "react";
const Person = props => {
  const { name, age, skill } = props;
  return (
    <div>
      <h2>
        I am {name},My age is {age},I know {skill}
      </h2>
    </div>
  );
};
export default Person;

它为什么不能给我正确的输出？

- Kaptan Bhardwaj

---

你的代码看起来没有问题，你得到了什么输出？我使用你的代码创建了一个codesandbox，它可以正常工作，所以我不知道问题出在哪里。https://codesandbox.io/s/wonderful-fermi-5qhro?fontsize=14&hidenavigation=1&theme=dark - oscarteg

Answer 1

你可以使用嵌套解构来获取person属性： nested destructuring。

const { person: { name, age, skill } } = props;

使用嵌套解构是因为 props 具有以下结构：

{
  person: {
    name: ...,
    age: ...,
    skill: ...
  }
}

或者，你可以直接从props中获取person，然后使用它的属性，与你最初编写的类似：

const { person } = props;

return (
  <div>
     <h2>I am {person.name},My age is {person.age},I know {person.skill} </h2>
  </div>
);

- Alberto Trindade Tavares

---

你不必这样做。他的方法是完全正确的。只需从props中解构出person，然后使用点运算符从对象中获取该属性即可。 - oscarteg

谢谢，但是为什么要进行嵌套解构？ - Kaptan Bhardwaj

@KaptanBhardwaj 我编辑了我的答案，更好地解释了为什么可以在这里使用嵌套解构。 - Alberto Trindade Tavares

Answer 2

Greet 组件从父组件接收 name 和 heroName 作为 props，因此您可以像之前一样解构它。

<Greet name="kaptan" heroName=" ek"/>

但是 Person 组件作为 prop 接收一个包含属性 name、age、skill 等的对象 person。所以您不能直接解构它，必须先解构 person prop。

<Person person ={person}/>

- Anurag Srivastava

---

是的，你可以直接这样做。 - new QOpenGLWidget

@zixuan 我的意思是 OP 在他的 Greet 组件中使用的方式。 - Anurag Srivastava

Answer 3

你可以通过解构对象获取其属性，也可以进行嵌套解构。嵌套解构更容易，因为如果有更多的属性，则需要更多的代码行来获取每个属性。

- new QOpenGLWidget