Skip to content

Commit 56c89c4

Browse files
authored
docs(cn): translate reference/react-dom/components/option into Chinese (#1198)
1 parent fb2f793 commit 56c89c4

File tree

1 file changed

+20
-20
lines changed
  • src/content/reference/react-dom/components

1 file changed

+20
-20
lines changed

src/content/reference/react-dom/components/option.md

+20-20
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: "<option>"
44

55
<Intro>
66

7-
The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
7+
[浏览器内置的 `<option>` 组件](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) 允许你渲染 [`<select>`](/reference/react-dom/components/select) 组件的选项(option)。
88

99
```js
1010
<select>
@@ -19,11 +19,11 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/
1919

2020
---
2121

22-
## Reference {/*reference*/}
22+
## 参考 {/*reference*/}
2323

2424
### `<option>` {/*option*/}
2525

26-
The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) lets you render an option inside a [`<select>`](/reference/react-dom/components/select) box.
26+
[浏览器内置的 `<option>` 组件](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) 允许你渲染 [`<select>`](/reference/react-dom/components/select) 组件的选项(option)。
2727

2828
```js
2929
<select>
@@ -32,43 +32,43 @@ The [built-in browser `<option>` component](https://developer.mozilla.org/en-US/
3232
</select>
3333
```
3434

35-
[See more examples below.](#usage)
35+
[参见下面更多示例](#usage)
3636

3737
#### Props {/*props*/}
3838

39-
`<option>` supports all [common element props.](/reference/react-dom/components/common#props)
39+
`<option>` 支持所有 [常见的元素属性](/reference/react-dom/components/common#props)
4040

41-
Additionally, `<option>` supports these props:
41+
除此之外,`<option>` 还支持以下属性:
4242

43-
* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#disabled): A boolean. If `true`, the option will not be selectable and will appear dimmed.
44-
* [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#label): A string. Specifies the meaning of the option. If not specified, the text inside the option is used.
45-
* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value): The value to be used [when submitting the parent `<select>` in a form](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form) if this option is selected.
43+
* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#disabled):布尔值。如果 `disabled``true`,该选项(option)将会被选中,并将展示为暗淡状态(dimmed)。
44+
* [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#label):字符串。指定选项的含义。如果未指定,则使用选项内部的文本。
45+
* [`value`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#value):如果选择了此选项,则在提交表单时将使用此选项的 `value` 值作为父级 `<select>` 的值。详细信息请参阅 [在提交表单时读取 `<select>` ](/reference/react-dom/components/select#reading-the-select-box-value-when-submitting-a-form)
4646

47-
#### Caveats {/*caveats*/}
47+
#### 注意 {/*caveats*/}
4848

49-
* React does not support the `selected` attribute on `<option>`. Instead, pass this option's `value` to the parent [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option) for an uncontrolled select box, or [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) for a controlled select.
49+
* React 不支持在 `<option>` 上使用 `selected` 属性。相反,对于非受控选择框,请将此选项的 `value` 属性传递给父级 [`<select defaultValue>`](/reference/react-dom/components/select#providing-an-initially-selected-option);对于受控选择框,请使用 [`<select value>`](/reference/react-dom/components/select#controlling-a-select-box-with-a-state-variable) 来控制选择框的值。
5050

5151
---
5252

53-
## Usage {/*usage*/}
53+
## 用法 {/*usage*/}
5454

55-
### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
55+
### 显示带有选项的选择框 {/*displaying-a-select-box-with-options*/}
5656

57-
Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
57+
渲染一个包含一系列 `<option>` 组件的 `<select>`,来展示一个选择框,并给每个 `<option>` 都设置一个 `value` 属性,表示要与表单一起提交的数据。
5858

59-
[Read more about displaying a `<select>` with a list of `<option>` components.](/reference/react-dom/components/select)
59+
在这里了解更多关于 [如何展示一个包含一系列 `<option>` 组件的 `<select>`](/reference/react-dom/components/select) 的信息。
6060

6161
<Sandpack>
6262

6363
```js
6464
export default function FruitPicker() {
6565
return (
6666
<label>
67-
Pick a fruit:
68-
<select name="selectedFruit">
69-
<option value="apple">Apple</option>
70-
<option value="banana">Banana</option>
71-
<option value="orange">Orange</option>
67+
选择一个水果:
68+
<select name="精选水果">
69+
<option value="苹果">苹果</option>
70+
<option value="香蕉">香蕉</option>
71+
<option value="橘子">橘子</option>
7272
</select>
7373
</label>
7474
);

0 commit comments

Comments
 (0)