1773239962

resource/前端/如何成为一个 React 工程师呢？.md

@@ -144,7 +144,7 @@ export default FunctionalCounter
 
 # 第二章 组件化开发核心
 
-Props 通信
+Props 通信（只读的，子组件不可以进行修改，单向数据流。）
 
 ```tsx
 type Props = {
@@ -163,12 +163,59 @@ export default PrintNmae
 
 ```
 
-传参
+普通传参
 
 ```tsx
 <PrintNmae name="John" />
 ```
 
+children 传参，这里 type
+
+```tsx
+import React from 'react'
+
+type CardProps = React.PropsWithChildren<{}>
+
+const Card = ({ children }: CardProps) => {
+  return (
+    <div
+      style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Card
+```
+
+关于 `{ children }: CardProps` 是组件接收一个 props 然后从里边结构出来 children
+
+类型声明：
+
+```tsx
+type UserProps = {
+  name: string
+  age: number
+  isVerified: boolean
+  hobbies?: string[]
+}
+
+export const User = (user: UserProps) => {
+  const { name, age, isVerified, hobbies } = user
+
+  return (
+    <div>
+      <h2>{name}</h2>
+      <p>Age: {age}</p>
+      <p>校验: {isVerified ? '已验证' : '未验证'}</p>
+      {hobbies && hobbies.length > 0 && <p>爱好: {hobbies.join(', ')}</p>}
+    </div>
+  )
+}
+
+```
+
 # CSS
 
 顶级作用域