React组件间传递对象类型props，如何避免重复书写props.data？

你可以通过以下几种方式避免重复书写props.data，同时优化对象类型props的传递逻辑： #

基础写法：提前提取对象变量 #

不需要用到解构，只需要在组件逻辑开头统一提取一次data即可：

import React from "react";    

const Header = (props) => {
  // 仅赋值一次，后续直接使用data变量
  const data = props.data;
  return (
    <header>
      <div className="header-wrapper">
        <h1>{data.welcome}</h1>
        <h2>{data.title}</h2>
        <h3>{data.subtitle}</h3>
        <p>
          {data.author.firstName} {data.author.lastName}
        </p>
        </div>
    </header>
  );
};

export default Header;

方案1：参数解构提取props字段 #

你之前解构失败大概率是语法使用有误，正确的解构写法如下：

单层解构 #

直接在组件入参时解构出data对象：

import React from "react";    

const Header = ({ data }) => {
  // 直接使用data变量，无需再从props取
  const { welcome, title, subtitle, author } = data;
  const { firstName, lastName } = author;
  return (
    <header>
      <div className="header-wrapper">
        <h1>{welcome}</h1>
        <h2>{title}</h2>
        <h3>{subtitle}</h3>
        <p>
          {firstName} {lastName}
        </p>
        </div>
    </header>
  );
};

export default Header;

深层解构（一步到位） #

可以直接在入参时完成所有层级的解构：

const Header = ({ 
  data: { 
    welcome, 
    title, 
    subtitle, 
    author: { firstName, lastName } 
  } 
}) => {
  // 直接使用解构出的所有变量即可
  return (
    <header>
      <div className="header-wrapper">
        <h1>{welcome}</h1>
        <h2>{title}</h2>
        <h3>{subtitle}</h3>
        <p>
          {firstName} {lastName}
        </p>
        </div>
    </header>
  );
};

方案2：传递时展开对象，去掉嵌套层级 #

在父组件传递props时直接展开data对象，将所有属性作为独立props传给子组件：

App.js修改： #

return (
  <div className="app">
     {/* 展开data对象，直接传递所有内部属性 */}
     <Header {...data} />
  </div>
);

Header.js修改： #

import React from "react";    

// 直接接收对应属性即可，无需再通过data访问
const Header = ({ welcome, title, subtitle, author }) => {
  const { firstName, lastName } = author;
  return (
    <header>
      <div className="header-wrapper">
        <h1>{welcome}</h1>
        <h2>{title}</h2>
        <h3>{subtitle}</h3>
        <p>
          {firstName} {lastName}
        </p>
        </div>
    </header>
  );
};

export default Header;

方案3：跨多层组件传递时用useContext #

如果你的数据需要传递给多层嵌套的子组件，不想逐层传递props，可以使用React内置的useContextAPI做全局状态共享，你当前的父子组件直传场景不需要用到这个方案。

内容的提问来源于stack exchange，提问作者Phucq.ins