Merge pull request #25 from GuoXiCheng/dev-c

update docs

src/.vitepress/config.mts

@@ -67,6 +67,9 @@ export default defineConfig(
                   }, {
                     text: '双向绑定',
                     link: '/frontend/react/component-interaction/two-way-binding'
+                  }, {
+                    text: '状态提升',
+                    link: '/frontend/react/component-interaction/lifting-state-up'
                   }
                 ]
               }

src/frontend/react/component-interaction/lifting-state-up.md

@@ -0,0 +1,49 @@
+# 状态提升
+
+## 什么是状态提升
+状态提升是React中用于状态管理的技术，当多个子组件需要共享状态时，可以将状态提升到它们最近共同父组件中，然后通过props将状态和状态更新函数传递给子组件。
+
+### 状态提升用例
+例如，通过将RMB和USD的值及其更新逻辑提升到共同的父组件中，再通过props传递状态和状态更新函数，实现了两个相互关联的输入框间的同步更新。
+```jsx
+import { useState } from 'react';
+
+const EXCHANGE_RATE = 7.2295;
+
+function Currency({ type, value, onChange }) {
+    return (
+        <div>
+            <label>{type}: </label>
+            <input
+                type="number"
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+            />
+        </div>
+    );
+}
+
+function App() {
+    const [rmbValue, setRmbValue] = useState(0);
+    const [usdValue, setUsdValue] = useState(0);
+
+    function handleRmbChange(rmb) {
+        setRmbValue(rmb);
+        setUsdValue((rmb / EXCHANGE_RATE).toFixed(4));
+    }
+
+    function handleUsdChange(usd) {
+        setUsdValue(usd);
+        setRmbValue((usd * EXCHANGE_RATE).toFixed(4));
+    }
+
+    return (
+        <>
+            <Currency type="RMB" value={rmbValue} onChange={handleRmbChange} />
+            <Currency type="USD" value={usdValue} onChange={handleUsdChange} />
+        </>
+    );
+}
+
+export default App;
+```

src/frontend/react/jsx.md

@@ -57,12 +57,22 @@ function DemoB({selected}) {
     return <div className={selected ? 'active' : 'inactive'}>Hello, React</div>;
 }
 ```
-也可以直接在标签中定义样式
+也可以直接在标签中定义样式，这里第一层`{}`表示JSX的表达式，第二层`{}`表示对象。
 ```jsx
 function Demo() {
     return <div style={{ color: 'red', fontSize: '20px' }}>Hello, React</div>;
 }
 ```
+使用模板字符串
+```jsx
+function Demo({ selected }) {
+    return (
+        <div className={`default ${selected ? 'active' : 'inactive'}`}>
+            Hello, React
+        </div>
+    );
+}
+```
 
 ### 使用图片
 URL导入图片

src/index.md

@@ -12,6 +12,7 @@ import MarkMap from './MarkMap.vue';
 - Web
   - HTML
   - CSS
+    - Tailwind CSS
 - [JavaScript](javascript/index)
     - [ECMAScript](javascript/ecma-script/index)
       - 基本引用
@@ -36,10 +37,12 @@ import MarkMap from './MarkMap.vue';
     - [JSX语法](frontend/react/jsx)
     - [插槽](frontend/react/slot)
     - [动态组件标识符](frontend/react/dynamic-component-identifier)
+    - Styled Components
     - 组件间通信
       - [props](frontend/react/component-interaction/props)
       - [state](frontend/react/component-interaction/state)
       - [双向绑定](frontend/react/component-interaction/two-way-binding)
+      - [状态提升](frontend/react/component-interaction/lifting-state-up)
 - 后端
   - [NodeJS](backend/nodejs/index)
     - [EventEmitter](backend/nodejs/event-emitter)

src/todo.md

@@ -1 +1,2 @@
-- React 状态提升
+- React Styled Components 的基本用法
+- React Styled Components 的条件渲染