React 中的解构道具

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;

它没有给我正确的输出为什么？

Answer 1

您可以使用nested destructuring 获取person 属性：

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>
);

Answer 2

您可以解构人员并获取他们的属性，也可以进行嵌套解构。嵌套解构更容易，因为如果你有更多的属性，那么获取每个属性需要更多的代码行。

Answer 3

Greet 组件从父组件接收name、heroName 作为道具，因此您可以像以前一样对其进行解构。

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

但是Person 组件接收person 作为prop 并且包含属性name、age、skill 等。所以你不能直接解构它。 你必须解构 person 属性

<Person person ={person}/>