Javascript React中的解构道具

我开始学习React js，并开始讨论解构道具的主题。通常，我们要做的是对道具进行解构，然后使用属性，就像下面组件中的代码一样

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;

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;

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;

从“React”导入React；
常量问候=道具=>{
const{name，heroName}=props；//这里我对它进行了解构
返回(
你好{name}a.k.a{heroName}
{" "}
//然后简单地使用name和heroName
);
};
导出默认值；

这是我的应用程序组件

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;

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;

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;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“/components/Greet”导入问候语；
函数App（）{
返回(
);
}
导出默认应用程序；

上面的代码工作得很好，然后我进一步做了一个人，下面的名字列表组件就是我的名字列表组件

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;

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;

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;

从“React”导入React；
从“/”导入人员；
函数名称列表（）{
警察人员=[
{
id:1，
姓名：“卡普坦”，
年龄:30,，
技能：“反应”
},
{
id:2，
姓名：“林库”，
年龄:29,，
技能：“java”
},
{
id:3，
名称：“ankit”，
年龄:39岁，
技能：“vue”
}
];
const personsList=persons.map（person=>）；
返回{personsList}；
}
导出默认名称列表；

这是我的个人部分

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;

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;

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;

从“React”导入React；
const Person=（{Person}）=>{
//这里我需要解构person对象
返回(
我是{person.name}，我的年龄是{person.age}，我认识{person.skill}
);
};
出口违约人；

所以我的问题是，为什么面对面组件我不能像在问候组件中那样进行解构

这样

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;

从“React”导入React；
const Person=props=>{
常量{姓名、年龄、技能}=道具；
返回(
我是{name}，我的年龄是{age}，我知道{skill}
);
};
出口违约人；

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

您可以使用它来获取

人员

属性：

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

const{person}=props；
返回(
我是{person.name}，我的年龄是{person.age}，我认识{person.skill}
);

Greet

组件从父组件接收

name

，

heroName

作为道具，因此您可以像以前一样对其进行分解

但是

Person

组件将

Person

作为道具接收，其中包含属性

name

、

age

、

skill

等，因此不能直接对其进行分解。 你必须解构

人物

道具

---

您可以对人员进行分解并获取其属性，也可以进行嵌套分解。嵌套的解构更容易，因为如果有更多的属性，则需要更多的代码行来获取每个属性。

您不需要这样做。他所做的完全正确。只需从道具中解构人物，并使用点从对象中获取该属性。谢谢，但这样做的原因是什么destructuring@KaptanBhardwaj我编辑了我的答案，以便更好地解释为什么这里可以使用嵌套析构函数。是的，你可以直接这样做。@zixuan我的意思是OP在他的文章中使用的方式

Greet

组件您得到的输出是什么，因为我看不出您的代码有任何错误。我用你的代码创建了一个codesandbox，它可以工作，所以我不知道问题出在哪里。