diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index ff9032aac1..5c7dbe3fcb 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -4,7 +4,7 @@ title: createContext -`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read. +`createContext` 能让你创建一个 [context](/learn/passing-data-deeply-with-context) 以便组件能够提供和读取。 ```js const SomeContext = createContext(defaultValue) @@ -16,11 +16,11 @@ const SomeContext = createContext(defaultValue) --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `createContext(defaultValue)` {/*createcontext*/} -Call `createContext` outside of any components to create a context. +在任意组件外调用 `createContext` 来创建一个上下文。 ```js import { createContext } from 'react'; @@ -28,26 +28,26 @@ import { createContext } from 'react'; const ThemeContext = createContext('light'); ``` -[See more examples below.](#usage) +[请看下面的更多例子](#usage) -#### Parameters {/*parameters*/} +#### 参数 {/*parameters*/} -* `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time. +* `defaultValue`:当包裹需要读取上下文的组件树中没有匹配的上下文时,你可以用该值作上下文的。倘若你没有任何有意义的默认值,可指定其为 `null`。该默认值是用于作为”最后的手段“的备选值。它是静态的,永远不会随时间改变。 -#### Returns {/*returns*/} +#### 返回值 {/*returns*/} -`createContext` returns a context object. +`createContext` 返回一个 context 对象。 -**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: +**该 context 对象本身不包含任何信息。** 它只表示其他组件读取或提供的 *那个* context。一般来说,你将在组件上方使用 [`SomeContext.Provider`](#provider) 来指定 context 的值,并在被包裹的下方组件内调用 [`useContext(SomeContext)`](/reference/react/useContext) 来读取它。context 对象有一些属性: -* `SomeContext.Provider` lets you provide the context value to components. -* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. +* `SomeContext.Provider` 让你为被它包裹的组件提供上下文的值。 +* `SomeContext.Consumer` 是一个很少会用到的备选方案,它用于读取上下文的值。 --- ### `SomeContext.Provider` {/*provider*/} -Wrap your components into a context provider to specify the value of this context for all components inside: +用上下文 provider 包裹你的组件,来为里面所有的组件指定一个 context 的值: ```js function App() { @@ -63,17 +63,17 @@ function App() { #### Props {/*provider-props*/} -* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it. +* `value`:该值为你想传递给所有处于这个 provider 内读取该 context 的组件,无论它们处于多深的层级。context 的值可以为任何类型。该 provider 内的组件可通过调用 [`useContext(SomeContext)`](/reference/react/useContext) 来获取它上面最近的 context provider 的 `value`。 --- ### `SomeContext.Consumer` {/*consumer*/} -Before `useContext` existed, there was an older way to read context: +在 `useContext` 之前,有一种更老的方法来读取上下文: ```js function Button() { - // 🟡 Legacy way (not recommended) + // 🟡 遗留方式 (不推荐) return ( {theme => ( @@ -84,11 +84,11 @@ function Button() { } ``` -Although this older way still works, but **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:** +尽管这种老方法依然奏效,但 **新代码都应该通过 [`useContext()`](/reference/react/useContext) 来读取上下文:** ```js function Button() { - // ✅ Recommended way + // ✅ 推荐方式 const theme = useContext(ThemeContext); return