React 中利用解构语法 ... 快速方便传递 props 参数

原创已于 2022-10-16 10:11:47 修改 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-06-24 13:02:15 首次发布

React 入门法则专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何通过React的解构特性简化组件间props的传递，从interfaceProps到解构对象、省略对象定义和ES6字面量对象，展示了更便捷的写法，并推荐了个人常用的优雅传递方式。

当我们创建一个组件之后，传递的 props 有时候比较多：

interface Props {
  token: string;
  setToken: Dispatch<SetStateAction<string>>;
  gitProviderOrgName: string;
  setGitProviderOrgName: Dispatch<SetStateAction<string>>;
  modalDisplay: boolean;
  setModalDisplay: Dispatch<SetStateAction<boolean>>;
  successCb?: Function;
}

export default function GitHubPAT(props: Props): React.ReactElement {
  // ... Code
}

引用组件时要写重复的一堆 prop：

<GitHubPAT
    token={token}
    setToken={setToken}
    gitProviderOrgName={gitProviderOrgName}
    setGitProviderOrgName={setGitProviderOrgName}
    modalDisplay={modalDisplay}
    setModalDisplay={setModalDisplay}
/>

看着这一坨 💩，心情：

temper

还好React 提供了一个叫做解构特性，利用解构操作符（...）将一个对象解构作为子组件的 props：

function Father() {
  const props = {
    token: token,
    setToken: setToken,
    gitProviderOrgName: gitProviderOrgName,
    setGitProviderOrgName: setGitProviderOrgName,
    modalDisplay: modalDisplay,
    setModalDisplay: setModalDisplay,
  };

  
  return (
    <>
      {/* 利用解构特性，将 props 对象透传给子组件 */}
      <GitHubPAT {...props} />
    </>
  );
}

当然，我们也可以省略定义对象，直接：

{/* 省略对象定义*/}
<GitHubPAT
  {...{
    token: token,
    setToken: setToken,
    gitProviderOrgName: gitProviderOrgName,
    setGitProviderOrgName: setGitProviderOrgName,
    modalDisplay: modalDisplay,
    setModalDisplay: setModalDisplay,
  }}
/>

再利用 ES6 字面量对象定义新特性，省到极致，快速方便：

<GitHubPAT
  {...{
    token,
    setToken,
    gitProviderOrgName,
    setGitProviderOrgName,
    modalDisplay,
    setModalDisplay,
  }}
/>

🧤 个人比较推荐使用这种方式，虽然它有一定的理解成本，但是并不高。只要习惯了这种传递方式，就会发现它的优雅和便捷。

Reference

[1] https://reactjs.org/docs/jsx-in-depth.html#spread-attributes