diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 3d7291b089..1cfadc0b5a 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -6,7 +6,7 @@ title: React Blog 这个博客是 React 团队更新的官方来源。任何重要的内容,包括发布说明或弃用通知,都会首先在这里发布。 -你也可以在 Bluesky 上关注 [@react.dev](https://bsky.app/profiles/react.js) 的账号,Twitter 的 [@reactjs](https://twitter.com/reactjs) 账号,但如果你只阅读这个博客,你也不会错过任何重要的内容。 +你也可以在 Bluesky 上关注 [@react.dev](https://bsky.app/profile/react.dev),或者在 Twitter 上关注 [@reactjs](https://twitter.com/reactjs)。不过只要你阅读这个博客,就不会错过任何重要内容。
diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index a73a1170a5..7bbcc9f0ad 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -471,15 +471,15 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
- + {children} - +
); } ``` -这告诉 React:“如果在 `
` 组件中的任何子组件请求 `LevelContext`,给他们这个 `level`。”组件会使用 UI 树中在它上层最近的那个 `` 传递过来的值。 +这告诉 React:“如果在 `
` 组件中的任何子组件请求 `LevelContext`,给他们这个 `level`。”组件会使用 UI 树中在它上层最近的那个 `` 传递过来的值。 @@ -517,9 +517,9 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
- + {children} - +
); } @@ -570,7 +570,7 @@ export const LevelContext = createContext(1); 这与原始代码的运行结果相同,但是你不需要向每个 `Heading` 组件传递 `level` 参数了!取而代之的是,它通过访问上层最近的 `Section` 来“断定”它的标题级别: 1. 你将一个 `level` 参数传递给 `
`。 -2. `Section` 把它的子元素包在 `` 里面。 +2. `Section` 把它的子元素包在 `` 里面。 3. `Heading` 使用 `useContext(LevelContext)` 访问上层最近的 `LevelContext` 提供的值。 ## 在相同的组件中使用并提供 context {/*using-and-providing-context-from-the-same-component*/} @@ -599,9 +599,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -647,9 +647,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -780,9 +780,9 @@ export default function Section({ children, isFancy }) { 'section ' + (isFancy ? 'fancy' : '') }> - + {children} - +
); } @@ -872,7 +872,7 @@ Context 不局限于静态值。如果你在下一次渲染时传递不同的值 * 传递 Context 的方法: 1. 通过 `export const MyContext = createContext(defaultValue)` 创建并导出 context。 2. 在无论层级多深的任何子组件中,把 context 传递给 `useContext(MyContext)` Hook 来读取它。 - 3. 在父组件中把 children 包在 `` 中来提供 context。 + 3. 在父组件中把 children 包在 `` 中来提供 context。 * Context 会穿过中间的任何组件。 * Context 可以让你写出 “较为通用” 的组件。 * 在使用 context 之前,先试试传递 props 或者将 JSX 作为 `children` 传递。 @@ -1026,7 +1026,7 @@ li { 移除掉所有组件中的 `imageSize` 参数。 -在 `Context.js` 中创建并导出 `ImageSizeContext`。然后用 `` 包裹住整个列表来向下传递值,最后在 `PlaceImage` 中使用 `useContext(ImageSizeContext)` 来读取它。 +在 `Context.js` 中创建并导出 `ImageSizeContext`。然后用 `` 包裹住整个列表来向下传递值,最后在 `PlaceImage` 中使用 `useContext(ImageSizeContext)` 来读取它。 @@ -1040,7 +1040,7 @@ export default function App() { const [isLarge, setIsLarge] = useState(false); const imageSize = isLarge ? 150 : 100; return ( -
-
+
) }