From cc774fa23167173c144096bb02a49807bcd9eccb Mon Sep 17 00:00:00 2001 From: Karthikeyan B Date: Thu, 27 Feb 2025 16:10:41 +0530 Subject: [PATCH 1/3] removing Provider as in React 19 Context can be used as a provider (#7654) --- .../learn/passing-data-deeply-with-context.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/content/learn/passing-data-deeply-with-context.md b/src/content/learn/passing-data-deeply-with-context.md index 1aea87b354..e81678c8e2 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -468,15 +468,15 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
- + {children} - +
); } ``` -This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. +This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. @@ -514,9 +514,9 @@ import { LevelContext } from './LevelContext.js'; export default function Section({ level, children }) { return (
- + {children} - +
); } @@ -567,7 +567,7 @@ export const LevelContext = createContext(1); It's the same result as the original code, but you did not need to pass the `level` prop to each `Heading` component! Instead, it "figures out" its heading level by asking the closest `Section` above: 1. You pass a `level` prop to the `
`. -2. `Section` wraps its children into ``. +2. `Section` wraps its children into ``. 3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`. ## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/} @@ -595,9 +595,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -643,9 +643,9 @@ export default function Section({ children }) { const level = useContext(LevelContext); return (
- + {children} - +
); } @@ -776,9 +776,9 @@ export default function Section({ children, isFancy }) { 'section ' + (isFancy ? 'fancy' : '') }> - + {children} - +
); } @@ -868,7 +868,7 @@ In general, if some information is needed by distant components in different par * To pass context: 1. Create and export it with `export const MyContext = createContext(defaultValue)`. 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep. - 3. Wrap children into `` to provide it from a parent. + 3. Wrap children into `` to provide it from a parent. * Context passes through any components in the middle. * Context lets you write components that "adapt to their surroundings". * Before you use context, try passing props or passing JSX as `children`. @@ -1022,7 +1022,7 @@ li { Remove `imageSize` prop from all the components. -Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: +Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: @@ -1036,7 +1036,7 @@ export default function App() { const [isLarge, setIsLarge] = useState(false); const imageSize = isLarge ? 150 : 100; return ( -
- + ) } From 5f09d9f4467871955d794aa5fbc7bf3c4e7a5f4f Mon Sep 17 00:00:00 2001 From: Josef Hartsough <36377458+JosefHartsough@users.noreply.github.com> Date: Thu, 27 Feb 2025 05:41:09 -0500 Subject: [PATCH 2/3] Invalid bluesky dev account link (#7653) * Update index.md Invalid link to bluesky account * Update index.md Fixed invalid bluesky link for react.dev --- src/content/blog/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 5cd8304b10..f7bbe76f3d 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -6,7 +6,7 @@ title: React Blog This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. -You can also follow the [@react.dev](https://bsky.app/profiles/react.js) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. +You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. From 05bd08d6dbd2aa52435d545c4d0f3d8d78fb537f Mon Sep 17 00:00:00 2001 From: Xleine Date: Fri, 28 Feb 2025 15:24:03 +0800 Subject: [PATCH 3/3] fix conflict --- src/content/blog/index.md | 8 +---- .../learn/passing-data-deeply-with-context.md | 33 +++---------------- 2 files changed, 5 insertions(+), 36 deletions(-) diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 9dd9dea2d7..1cfadc0b5a 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -4,15 +4,9 @@ title: React Blog -<<<<<<< HEAD 这个博客是 React 团队更新的官方来源。任何重要的内容，包括发布说明或弃用通知，都会首先在这里发布。 -======= -This blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted here first. -You can also follow the [@react.dev](https://bsky.app/profile/react.dev) account on Bluesky, or [@reactjs](https://twitter.com/reactjs) account on Twitter, but you won’t miss anything essential if you only read this blog. ->>>>>>> 5f09d9f4467871955d794aa5fbc7bf3c4e7a5f4f - -你也可以在 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 2e1d9dde24..7bbcc9f0ad 100644 --- a/src/content/learn/passing-data-deeply-with-context.md +++ b/src/content/learn/passing-data-deeply-with-context.md @@ -479,11 +479,7 @@ export default function Section({ level, children }) { } ``` -<<<<<<< HEAD -这告诉 React：“如果在 `
` 组件中的任何子组件请求 `LevelContext`，给他们这个 `level`。”组件会使用 UI 树中在它上层最近的那个 `` 传递过来的值。 -======= -This tells React: "if any component inside this `
` asks for `LevelContext`, give them this `level`." The component will use the value of the nearest `` in the UI tree above it. ->>>>>>> 5f09d9f4467871955d794aa5fbc7bf3c4e7a5f4f +这告诉 React：“如果在 `
` 组件中的任何子组件请求 `LevelContext`，给他们这个 `level`。”组件会使用 UI 树中在它上层最近的那个 `` 传递过来的值。 @@ -573,15 +569,9 @@ export const LevelContext = createContext(1); 这与原始代码的运行结果相同，但是你不需要向每个 `Heading` 组件传递 `level` 参数了！取而代之的是，它通过访问上层最近的 `Section` 来“断定”它的标题级别： -<<<<<<< HEAD 1. 你将一个 `level` 参数传递给 `
`。 -2. `Section` 把它的子元素包在 `` 里面。 +2. `Section` 把它的子元素包在 `` 里面。 3. `Heading` 使用 `useContext(LevelContext)` 访问上层最近的 `LevelContext` 提供的值。 -======= -1. You pass a `level` prop to the `
`. -2. `Section` wraps its children into ``. -3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`. ->>>>>>> 5f09d9f4467871955d794aa5fbc7bf3c4e7a5f4f ## 在相同的组件中使用并提供 context {/*using-and-providing-context-from-the-same-component*/} @@ -878,25 +868,14 @@ Context 不局限于静态值。如果你在下一次渲染时传递不同的值 -<<<<<<< HEAD * 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` 传递。 -======= -* Context lets a component provide some information to the entire tree below it. -* To pass context: - 1. Create and export it with `export const MyContext = createContext(defaultValue)`. - 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep. - 3. Wrap children into `` to provide it from a parent. -* Context passes through any components in the middle. -* Context lets you write components that "adapt to their surroundings". -* Before you use context, try passing props or passing JSX as `children`. ->>>>>>> 5f09d9f4467871955d794aa5fbc7bf3c4e7a5f4f @@ -1047,11 +1026,7 @@ li { 移除掉所有组件中的 `imageSize` 参数。 -<<<<<<< HEAD -在 `Context.js` 中创建并导出 `ImageSizeContext`。然后用 `` 包裹住整个列表来向下传递值，最后在 `PlaceImage` 中使用 `useContext(ImageSizeContext)` 来读取它。 -======= -Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`: ->>>>>>> 5f09d9f4467871955d794aa5fbc7bf3c4e7a5f4f +在 `Context.js` 中创建并导出 `ImageSizeContext`。然后用 `` 包裹住整个列表来向下传递值，最后在 `PlaceImage` 中使用 `useContext(ImageSizeContext)` 来读取它。