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

当我们创建一个组件之后，传递的 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
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

<GitHubPAT
    token={token}
    setToken={setToken}
    gitProviderOrgName={gitProviderOrgName}
    setGitProviderOrgName={setGitProviderOrgName}
    modalDisplay={modalDisplay}
    setModalDisplay={setModalDisplay}
/>
1
2
3
4
5
6
7
8

看着这一坨 💩，心情：

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

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

  
  return (
    <>
      {/* 利用解构特性，将 props 对象透传给子组件 */}
      <GitHubPAT {...props} />
    </>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

{/* 省略对象定义*/}
<GitHubPAT
  {...{
    token: token,
    setToken: setToken,
    gitProviderOrgName: gitProviderOrgName,
    setGitProviderOrgName: setGitProviderOrgName,
    modalDisplay: modalDisplay,
    setModalDisplay: setModalDisplay,
  }}
/>
1
2
3
4
5
6
7
8
9
10
11

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

<GitHubPAT
  {...{
    token,
    setToken,
    gitProviderOrgName,
    setGitProviderOrgName,
    modalDisplay,
    setModalDisplay,
  }}
/>
1
2
3
4
5
6
7
8
9
10

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

我是 Pandy，一个喜欢英语的程序猿 👨‍💻

如果你挣扎于看不懂英语官网，或者对英语感冒的话，可以关注公众号 Yopth 哦，我们加入一起充电英语 🔌 。

Reference

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