如何解构嵌套的道具？

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;

这是我的 App 组件

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 嵌套解构 来获取 person 属性：

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

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

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

或者，您可以从 person 获取 props 然后使用它的属性，类似于您最初写的：

 const { person } = props;

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

原文由 Alberto Trindade Tavares 发布，翻译遵循 CC BY-SA 4.0 许可协议