React中子组件如何实现对象解构？组件传参相关问题咨询

你当前的传参方式与子组件的解构逻辑不匹配：父组件向MyComponent传递了一个名为person的prop，子组件接收到的props结构为{ person: {name: "ALEN", age: 40} }，直接解构顶层props的name和age自然无法获取到对应值。

有两种常见写法实现需求： #

方案1：父组件传递时展开对象 #

父组件传递person时用展开运算符，将对象内的属性直接作为顶层props传递给子组件，子组件原有解构逻辑无需修改：

const MyComponent= ({name,age})=> { 
    return (
      <div>
        <h1> HI THERE I M {name}</h1>
      </div>
    );
}  


function App() {
  let person = { name: "ALEN", age : 40};
  return (
    <div>
      {/* 这里用展开运算符把person的属性平铺为props */}
      <MyComponent {...person} />
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

方案2：子组件解构时嵌套取值 #

父组件传参逻辑保持不变，子组件解构时先取到person属性，再嵌套解构内部的name和age：

// 这里先解构props中的person，再对person做二次解构
const MyComponent= ({person: {name,age}})=> { 
    return (
      <div>
        <h1> HI THERE I M {name}</h1>
      </div>
    );
}  


function App() {
  let person = { name: "ALEN", age : 40};
  return (
    <div>
      <MyComponent person={person} />
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

内容的提问来源于stack exchange，提问作者Tanvir