From 8880f06fcfde77c6372f907df084972ab8ca00f9 Mon Sep 17 00:00:00 2001 From: Nya Candy Date: Mon, 26 Feb 2024 01:35:22 +0800 Subject: [PATCH] chore: add discuss about multiple props from tusooa --- hello-browser/index.md | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/hello-browser/index.md b/hello-browser/index.md index e101a61..194797c 100644 --- a/hello-browser/index.md +++ b/hello-browser/index.md @@ -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 + + +``` + +如果你把component的参数做成positional的话，那它就变成有序的了 + +```tsx +const Comp = (a, b, c) => { ... }; +``` + +那么我们就不知道函数参数里的a b c哪个对应JSX里的哪个了。 + +::: ## 使用组件库