Skip to content

Commit

Permalink
chore: add discuss about multiple props
Browse files Browse the repository at this point in the history
from tusooa
  • Loading branch information
Candinya committed Feb 25, 2024
1 parent 9822754 commit 8880f06
Showing 1 changed file with 21 additions and 2 deletions.
23 changes: 21 additions & 2 deletions hello-browser/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -687,9 +687,28 @@ PropsWithChildren 又是什么呢?从字面上来看,它指的是一个含
[解构赋值]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
…其实我也不知道,搜索了一下也没找到什么相关的信息。我猜是和 React 的编译转换和渲染逻辑有关, props 参数只是它的实际渲染中的某一个参数,它会再加入其他的东西。如果您找到了任何官方的资料说法,或是通过源码分析了的话,非常欢迎您在评论区提出,我们一起来交流。
~~…其实我也不知道,搜索了一下也没找到什么相关的信息。我猜是和 React 的编译转换和渲染逻辑有关, props 参数只是它的实际渲染中的某一个参数,它会再加入其他的东西。如果您找到了任何官方的资料说法,或是通过源码分析了的话,非常欢迎您在评论区提出,我们一起来交流。~~
无论如何, React 的组件传参虽然没有其他语言的函数调用的传参来得直接,但它依然还算优雅。我喜欢这种写法,您可以尝试发现自己喜欢的其他方案。
~~无论如何, React 的组件传参虽然没有其他语言的函数调用的传参来得直接,但它依然还算优雅。我喜欢这种写法,您可以尝试发现自己喜欢的其他方案。~~
::: tip 补充来自一位友友 @tusooa 西风 的提示([原始链接](https://kazv.moe/notice/AfFHPnunMPttM46D9E)):
这个很显然啊,因为在用jsx的时候,你的props是无序的:
```tsx
<Comp a={1} b={2} c={3} />
<Comp b={2} c={3} a={1} />
```
如果你把component的参数做成positional的话,那它就变成有序的了
```tsx
const Comp = (a, b, c) => { ... };
```
那么我们就不知道函数参数里的a b c哪个对应JSX里的哪个了。
:::
## 使用组件库
Expand Down

0 comments on commit 8880f06

Please sign in to comment.