From 44f37fc0ff2ac18a0ab69c649d6363e77d2f6647 Mon Sep 17 00:00:00 2001
From: rikako <496063163@qq.com>
Date: Thu, 25 May 2023 00:58:49 +0800
Subject: [PATCH] =?UTF-8?q?react=E6=96=87=E6=A1=A3=E9=98=85=E8=AF=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react/react文档.md | 58 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/react/react文档.md b/react/react文档.md
index 0ce6bc0..ae48483 100644
--- a/react/react文档.md
+++ b/react/react文档.md
@@ -219,6 +219,64 @@ function MyButton({ count, onClick }) {
 }
 ```
 此时，由MyApp传递给MyButton的值称之为prop
+## jsx展开传递props
+如果父组件想要将接收到的props全部传递给子组件，无需在子组件上列出props中全部属性，可以使用`...props`来进行展开
+```js
+function Profile(props) {
+  return (
+    <div className="card">
+      <Avatar {...props} />
+    </div>
+  );
+}
+```
+## 将jsx作为子组件传递
+当采用如下形式时：
+```js
+<Card>
+  <Avatar />
+</Card>
+```
+其中，父组件接收到的prop中，children将代表接受到的子组件内容
+```js
+import Avatar from './Avatar.js';
+
+function Card({ children }) {
+  return (
+    <div className="card">
+      {children}
+    </div>
+  );
+}
+
+export default function Profile() {
+  return (
+    <Card>
+      <Avatar
+        size={100}
+        person={{ 
+          name: 'Katsuko Saruhashi',
+          imageId: 'YfeOqp2'
+        }}
+      />
+    </Card>
+  );
+}
+```
+此时，想要嵌套在父组件内部的子组件可以通过props.children来访问。
+
+## 条件渲染
+如果在某些条件下，组件不想显示任何内容，可以返回null
+```js
+function Item({ name, isPacked }) {
+  if (isPacked) {
+    return null;
+  }
+  return <li className="item">{name}</li>;
+}
+```
+
+