mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 12:13:11 +00:00
[DOCS] Update zh-docs to v15-rc.1 (with #3240c09)
This commit is contained in:
iamchenxin
@@ -14,49 +14,49 @@ next: reusable-components-zh-CN.html
|
||||
|
||||
## 组合实例
|
||||
|
||||
一起来使用 Facebook Graph API 开发显示个人图片和用户名的简单 Avatar 组件吧。
|
||||
让我们用 Facebook Graph API 来开发一个显示 Facebook 页面图片和用户名的简单 Avatar 组件吧。
|
||||
|
||||
```javascript
|
||||
var Avatar = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<ProfilePic username={this.props.username} />
|
||||
<ProfileLink username={this.props.username} />
|
||||
<PagePic pagename={this.props.pagename} />
|
||||
<PageLink pagename={this.props.pagename} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ProfilePic = React.createClass({
|
||||
var PagePic = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
|
||||
<img src={'https://graph.facebook.com/' + this.props.pagename + '/picture'} />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var ProfileLink = React.createClass({
|
||||
var PageLink = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<a href={'https://www.facebook.com/' + this.props.username}>
|
||||
{this.props.username}
|
||||
<a href={'https://www.facebook.com/' + this.props.pagename}>
|
||||
{this.props.pagename}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<Avatar username="pwh" />,
|
||||
<Avatar pagename="Engineering" />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
## 从属关系
|
||||
|
||||
上面例子中，`Avatar` 拥有 `ProfilePic` 和 `ProfileLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说，如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。
|
||||
上面例子中，`Avatar` 拥有 `PagePic` 和 `PageLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说，如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。
|
||||
|
||||
把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中，`Avatar` 拥有 `div`、`ProfilePic` 和 `ProfileLink` 实例，`div` 是 `ProfilePic` 和 `ProfileLink` 实例的**父级**（但不是拥有者）。
|
||||
把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中，`Avatar` 拥有 `div`、`PagePic` 和 `PageLink` 实例，`div` 是 `PagePic` 和 `PageLink` 实例的**父级**（但不是拥有者）。
|
||||
|
||||
## 子级
|
||||
|
||||
|
||||
@@ -254,4 +254,4 @@ ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
|
||||
>
|
||||
> 因为无状态函数没有备份实例，你不能附加一个引用到一个无状态函数组件。 通常这不是问题，因为无状态函数不提供一个命令式的API。没有命令式的API，你就没有任何需要实例来做的事。然而，如果用户想查找无状态函数组件的DOM节点，他们必须把这个组件包装在一个有状态组件里（比如，ES6 类组件） 并且连接一个引用到有状态的包装组件。
|
||||
|
||||
在理想世界里，你的大多数组件都应该是无状态函数式的，因为这些无状态组件可以在React核心里经过一个快速的代码路径。 如果可能，这是推荐的模式。
|
||||
在理想世界里，你的大多数组件都应该是无状态函数，因为将来我们可能会用避免不必要的检查和内存分配的方式来对这些组件进行优化。 如果可能，这是推荐的模式。
|
||||
|
||||
@@ -96,7 +96,7 @@ function FancyCheckbox(props) {
|
||||
|
||||
## 使用和传递同一个 Prop
|
||||
|
||||
如果组件需要使用一个属性又要往下传递，可以直接使用 `checked={checked}` 再传一次。这样做比传整个 `this.props` 对象要好，因为更利于重构和语法检查。
|
||||
如果组件需要使用一个属性又要往下传递，可以直接使用 `checked={checked}` 再传一次。这样做比传整个 `props` 对象要好，因为更利于重构和语法检查。
|
||||
|
||||
```javascript
|
||||
function FancyCheckbox(props) {
|
||||
|
||||
@@ -30,11 +30,11 @@ next: working-with-the-browser-zh-CN.html
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> 对于 `<input>` and `<textarea>`， `onChange` 替代 — 一般应该用来替代 — the DOM's 内建的 [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) 事件处理。
|
||||
> 对于 `<input>` and `<textarea>`， `onChange` 取代 — 一般应该用来替代 — DOM内建的 [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) 事件处理。
|
||||
|
||||
## 受限组件
|
||||
## 受控组件
|
||||
|
||||
设置了 `value` 的 `<input>` 是一个*受限*组件。 对于受限的 `<input>`，渲染出来的 HTML 元素始终保持 `value` 属性的值。例如：
|
||||
一个*受控*的 `<input>` 有一个 `value` prop。渲染一个受控 `<input>` 会反映 `value` prop 的值。
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
@@ -42,7 +42,7 @@ next: working-with-the-browser-zh-CN.html
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码将渲染出一个值为 `Hello!` 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 `Hello!`。如果想响应更新用户输入的值，就得使用 `onChange` 事件：
|
||||
用户输入在被渲染的元素里将没有作用,因为 React 已经声明值为 `Hello!`。要更新 value 来响应用户输入，你可以使用 `onChange` 事件：
|
||||
|
||||
```javascript
|
||||
getInitialState: function() {
|
||||
@@ -52,12 +52,17 @@ next: working-with-the-browser-zh-CN.html
|
||||
this.setState({value: event.target.value});
|
||||
},
|
||||
render: function() {
|
||||
var value = this.state.value;
|
||||
return <input type="text" value={value} onChange={this.handleChange} />;
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码中，React 将用户输入的值更新到 `<input>` 组件的 `value` 属性。这样实现响应或者验证用户输入的界面就很容易了。例如：
|
||||
在这个例子中，我们接受用户提供的值并更新 `<input>` 组件的 `value` prop。这个模式使实现响应或者验证用户输入的界面更容易。例如：
|
||||
|
||||
```javascript
|
||||
handleChange: function(event) {
|
||||
@@ -67,13 +72,15 @@ next: working-with-the-browser-zh-CN.html
|
||||
|
||||
上面的代码接受用户输入，并截取前 140 个字符。
|
||||
|
||||
受控组件不维持一个自己的内部状态;它单纯的基于 props 渲染。
|
||||
|
||||
### 复选框与单选按钮的潜在问题
|
||||
|
||||
当心，在力图标准化复选框与单选按钮的变换处理中，React使用`click` 事件代替 `change` 事件。在大多数情况下它们表现的如同预期，除了在`change` handler中调用`preventDefault` 。`preventDefault` 阻止了浏览器视觉上更新输入，即使`checked`被触发。变通的方式是要么移除`preventDefault`的调用，要么把`checked` 的触发放在一个`setTimeout`里。
|
||||
|
||||
## 不受限组件
|
||||
## 不受控组件
|
||||
|
||||
没有设置 `value`(或者设为 `null`) 的 `<input>` 组件是一个*不受限*组件。对于不受限的 `<input>` 组件，渲染出来的元素直接反应用户输入。例如：
|
||||
一个没有 `value` 属性的 `<input>` 是一个不*受控*组件:
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
@@ -81,7 +88,9 @@ next: working-with-the-browser-zh-CN.html
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 `onChange` 事件可以监听值的变化。
|
||||
上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受控元素一样，使用 `onChange` 事件可以监听值的变化。
|
||||
|
||||
*不受控*组件维持它自己的内部状态。
|
||||
|
||||
### 默认值
|
||||
|
||||
@@ -93,17 +102,17 @@ next: working-with-the-browser-zh-CN.html
|
||||
}
|
||||
```
|
||||
|
||||
这个例子会像上面的 **不受限组件** 例子一样运行。
|
||||
这个例子会像上面的 **不受控组件** 例子一样运行。
|
||||
|
||||
同样的， `<input>` 支持 `defaultChecked` 、 `<select>` 支持 `defaultValue`.
|
||||
同样的， `<input type="checkbox">` 和 `<input type="radio">` 支持 `defaultChecked` 、 `<select>` 支持 `defaultValue`.
|
||||
|
||||
> 注意:
|
||||
>
|
||||
> `defaultValue` 和 `defaultChecked` props 只能在内部渲染时被使用。 如果你需要在随后的渲染更新值, 你需要使用 [受限组件](#受限组件).
|
||||
> `defaultValue` 和 `defaultChecked` props 只能在内部渲染时被使用。 如果你需要在随后的渲染更新值, 你需要使用 [受控组件](#受控组件).
|
||||
|
||||
## 高级主题
|
||||
|
||||
### 为什么使用受限组件？
|
||||
### 为什么使用受控组件？
|
||||
|
||||
在 React 中使用诸如 `<input>` 的表单组件时，遇到了一个在传统 HTML 中没有的挑战。比如下面的代码：
|
||||
|
||||
@@ -111,9 +120,9 @@ next: working-with-the-browser-zh-CN.html
|
||||
<input type="text" name="title" value="Untitled" />
|
||||
```
|
||||
|
||||
在 HTML 中将渲染 *初始值* 为 `Untitled` 的输入框。用户改变输入框的值时，节点的 `value` 属性( *property*)将随之变化，但是 `node.getAttribute('value')` 还是会返回初始设置的值 `Untitled`.
|
||||
它渲染一个*初始值*为 `Untitled` 的输入框。当用户改变输入框的值时，节点的 `value` 属性( *property*)将随之变化，但是 `node.getAttribute('value')` 还是会返回初始设置的值 `Untitled`.
|
||||
|
||||
与 HTML 不同，React 组件必须在任何时间点描绘视图的状态，而不仅仅是在初始化时。比如在 React 中：
|
||||
与 HTML 不同，React 组件必须在任何时间点表现视图的状态，而不仅仅是在初始化时。比如在 React 中：
|
||||
|
||||
```javascript
|
||||
render: function() {
|
||||
@@ -121,7 +130,7 @@ next: working-with-the-browser-zh-CN.html
|
||||
}
|
||||
```
|
||||
|
||||
该方法在任何时间点渲染组件以后，输入框的值就应该 *始终* 为 `Untitled`。
|
||||
既然这个方法描述了在任意时间点上的视图，那么文本输入框的值就应该*始终*为 `Untitled`。
|
||||
|
||||
### 为什么 `<textarea>` 使用 `value` 属性？
|
||||
|
||||
@@ -132,7 +141,7 @@ next: working-with-the-browser-zh-CN.html
|
||||
<textarea name="description">This is the description.</textarea>
|
||||
```
|
||||
|
||||
对 HTML 而言，让开发者设置多行的值很容易。但是，React 是 JavaScript，没有字符限制，可以使用 `\n` 实现换行。简言之，React 已经有 `value`、`defaultValue` 属性，`</textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此， 设置 `<textarea>` 值时不应该使用子节点：
|
||||
对 HTML 而言，让开发者设置多行的值很容易。但是，React 是 JavaScript，没有字符串限制，可以使用 `\n` 实现换行。简言之，React 已经有 `value`、`defaultValue` 属性，`</textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此， 设置 `<textarea>` 值时不应该使用子节点：
|
||||
|
||||
```javascript
|
||||
<textarea name="description" value="This is a description." />
|
||||
@@ -152,7 +161,7 @@ HTML 中 `<select>` 通常使用 `<option>` 的 `selected` 属性设置选中状
|
||||
</select>
|
||||
```
|
||||
|
||||
如果是不受限组件，则使用 `defaultValue`。
|
||||
如果是不受控组件，则使用 `defaultValue`。
|
||||
|
||||
> 注意：
|
||||
>
|
||||
|
||||
@@ -22,7 +22,7 @@ next: addons-zh-CN.html
|
||||
|
||||
### 浏览器中的JSX转化
|
||||
|
||||
如果你喜欢使用JSX，Babel提供了一个被称为browser.js的[开发用的浏览器中的 ES6 和 JSX 转换器](http://babeljs.io/docs/usage/browser/) ，它可以从`babel-core` npm release 或者[CDNJS](http://cdnjs.com/libraries/babel-core) 中 include。Include `<script type="text/babel">` 标记来使用 JSX 转换器.
|
||||
如果你喜欢使用JSX，Babel5 提供了被称为browser.js 用于开发的一个浏览器内的 ES6 和 JSX 转换器，它可以从 [CDNJS](http://cdnjs.com/libraries/babel-core/5.8.34) 引用。Include `<script type="text/babel">` 标记来使用 JSX 转换器.
|
||||
|
||||
> 注意:
|
||||
>
|
||||
|
||||
@@ -18,7 +18,7 @@ React插件是一系列的用来构建 React app的有用模块。 **这些应
|
||||
|
||||
下面的插件只存在开发版(未压缩)React中：
|
||||
|
||||
- [`TestUtils`](test-utils.html), 用于写测试用例的简单的辅助工具（仅存在于未压缩版本）。
|
||||
- [`Perf`](perf.html), 用于测量性能并给你提示哪里可以优化。
|
||||
- [`TestUtils`](test-utils.html), 用于写测试用例的简单的辅助工具。
|
||||
- [`Perf`](perf.html), 一个用于查找优化机会的性能分析工具。
|
||||
|
||||
要获取插件，单独从npm安装他们(例如 `npm install react-addons-pure-render-mixin`).我们不支持使用插件如果你没有用npm.
|
||||
|
||||
@@ -10,7 +10,7 @@ next: test-utils-zh-CN.html
|
||||
|
||||
> 注意：
|
||||
>
|
||||
> 如果你刚学这个框架，注意 `ReactLink` 对大多数应用是不需要的，应该慎重的使用。
|
||||
> 在 React v15 中 ReactLink 被弃用了。推荐明确的设置值和变动的处理，而不是使用 ReactLink。
|
||||
|
||||
在React里，数据单向流动： 从拥有者到子级。这是因为数据只单向流动[the Von Neumann model of computing](https://en.wikipedia.org/wiki/Von_Neumann_architecture)。你可以把它想象为 “单向数据绑定”。
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ permalink: context-zh-CN.html
|
||||
prev: advanced-performance-zh-CN.html
|
||||
---
|
||||
|
||||
React最大的优势之一是他很容易从你的React组件里跟踪数据流动。当你看着一个组件，你可以很容易准确看出哪个props被传入，这让你的APP很容易推断。
|
||||
React最大的优势之一是很容易从你的React组件里跟踪数据流动。当你看着一个组件，你可以很容易准确看出哪个props被传入，这让你的APP很容易推断。
|
||||
|
||||
偶尔，你想通过组件树传递数据，而不在每一级上手工下传prop，React的 "context" 让你做到这点。
|
||||
|
||||
@@ -160,6 +160,38 @@ function Button(props, context) {
|
||||
Button.contextTypes = {color: React.PropTypes.string};
|
||||
```
|
||||
|
||||
## Updating context
|
||||
|
||||
当 state 或者 props 变化时 `getChildContext` 函数会被调用。为了更新context里的数据，用 `this.setState` 触发一个本地的state更新。这将会触发一个新的 context 并且子级将收到变化。
|
||||
|
||||
```javascript
|
||||
var MediaQuery = React.createClass({
|
||||
getInitialState: function(){
|
||||
return {type:'desktop'};
|
||||
},
|
||||
childContextTypes: {
|
||||
type: React.PropTypes.string
|
||||
},
|
||||
getChildContext: function() {
|
||||
return {type: this.state.type};
|
||||
},
|
||||
componentDidMount: function(){
|
||||
var checkMediaQuery = function(){
|
||||
var type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';
|
||||
if (type !== this.state.type){
|
||||
this.setState({type:type});
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', checkMediaQuery);
|
||||
checkMediaQuery();
|
||||
},
|
||||
render: function(){
|
||||
return this.props.children;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 什么时候不用 context
|
||||
|
||||
正像全局变量是在写清晰代码时最好要避免的,你应该在大多数情况下避免使用context. 特别是,在用它来"节省输入"和代替显示传入props时要三思.
|
||||
|
||||
@@ -46,6 +46,15 @@ $ webpack
|
||||
>
|
||||
> 如果你正在使用 ES2015, 你将要使用 `babel-preset-es2015` 包.
|
||||
|
||||
**注意:** 默认情况下，React 将会在开发模式，很缓慢，不建议用于生产。要在生产模式下使用 React，设置环境变量 `NODE_ENV` 为 `production` （使用 envify 或者 webpack's DefinePlugin）。例如：
|
||||
|
||||
```js
|
||||
new webpack.DefinePlugin({
|
||||
"process.env": {
|
||||
NODE_ENV: JSON.stringify("production")
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## 不用 npm 的快速开始
|
||||
|
||||
@@ -81,7 +90,7 @@ $ webpack
|
||||
</html>
|
||||
```
|
||||
|
||||
在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 [JSX 语法](/react/docs/jsx-in-depth.html) 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 `<script type="text/babel">` 标签，并引入 Babel 来完成在浏览器里的代码转换。
|
||||
在 JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 [JSX 语法](/react/docs/jsx-in-depth.html) 里学习更多 JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 `<script type="text/babel">` 标签，并引入 Babel 来完成在浏览器里的代码转换。在浏览器里打开这个html，你应该可以看到成功的消息！
|
||||
|
||||
### 分离文件
|
||||
|
||||
@@ -130,6 +139,7 @@ ReactDOM.render(
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
对照下面更新你的 HTML 代码
|
||||
|
||||
```html{8,12}
|
||||
|
||||
@@ -18,11 +18,11 @@ React试着支持所有常见的元素.如果你需要一个没有列在这里
|
||||
a abbr address area article aside audio b base bdi bdo big blockquote body br
|
||||
button canvas caption cite code col colgroup data datalist dd del details dfn
|
||||
dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
|
||||
h6 head header hr html i iframe img input ins kbd keygen label legend li link
|
||||
main map mark menu menuitem meta meter nav noscript object ol optgroup option
|
||||
output p param picture pre progress q rp rt ruby s samp script section select
|
||||
small source span strong style sub summary sup table tbody td textarea tfoot th
|
||||
thead time title tr track u ul var video wbr
|
||||
h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li
|
||||
link main map mark menu menuitem meta meter nav noscript object ol optgroup
|
||||
option output p param picture pre progress q rp rt ruby s samp script section
|
||||
select small source span strong style sub summary sup table tbody td textarea
|
||||
tfoot th thead time title tr track u ul var video wbr
|
||||
```
|
||||
|
||||
### SVG 元素
|
||||
@@ -30,8 +30,8 @@ thead time title tr track u ul var video wbr
|
||||
下面的 SVG 元素是被支持的:
|
||||
|
||||
```
|
||||
circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline
|
||||
radialGradient rect stop svg text tspan
|
||||
circle clipPath defs ellipse g image line linearGradient mask path pattern
|
||||
polygon polyline radialGradient rect stop svg text tspan
|
||||
```
|
||||
|
||||
你也许对 [react-art](https://github.com/facebook/react-art)有兴趣,一个让React绘制Canvas, SVG, 或者 VML (for IE8) 的绘制库.
|
||||
@@ -53,25 +53,33 @@ React支持所有的 `data-*` 和 `aria-*` 以及下列的属性.
|
||||
|
||||
```
|
||||
accept acceptCharset accessKey action allowFullScreen allowTransparency alt
|
||||
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing charSet
|
||||
challenge checked classID className cols colSpan content contentEditable contextMenu
|
||||
controls coords crossOrigin data dateTime defer dir disabled download draggable
|
||||
encType form formAction formEncType formMethod formNoValidate formTarget frameBorder
|
||||
headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode
|
||||
keyParams keyType label lang list loop low manifest marginHeight marginWidth max
|
||||
maxLength media mediaGroup method min minLength multiple muted name noValidate open
|
||||
optimum pattern placeholder poster preload radioGroup readOnly rel required role
|
||||
rows rowSpan sandbox scope scoped scrolling seamless selected shape size sizes
|
||||
span spellCheck src srcDoc srcSet start step style summary tabIndex target title
|
||||
type useMap value width wmode wrap
|
||||
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
|
||||
charSet checked classID className colSpan cols content contentEditable
|
||||
contextMenu controls coords crossOrigin data dateTime default defer dir
|
||||
disabled download draggable encType form formAction formEncType formMethod
|
||||
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
|
||||
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
|
||||
lang list loop low manifest marginHeight marginWidth max maxLength media
|
||||
mediaGroup method min minLength multiple muted name noValidate nonce open
|
||||
optimum pattern placeholder poster preload radioGroup readOnly rel required
|
||||
reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
|
||||
shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
|
||||
summary tabIndex target title type useMap value width wmode wrap
|
||||
```
|
||||
|
||||
这些RDFa属性是被支持的 （许多RDFa属性和标准的HTML属性重叠，因此被从这个列表里去除）：
|
||||
|
||||
```
|
||||
about datatype inlist prefix property resource typeof vocab
|
||||
```
|
||||
|
||||
另外,支持下面的非标准属性:
|
||||
|
||||
- `autoCapitalize autoCorrect` for Mobile Safari.
|
||||
- `property` for [Open Graph](http://ogp.me/) meta tags.
|
||||
- `color` for `<link rel="mask-icon" />` in Safari.
|
||||
- `itemProp itemScope itemType itemRef itemID` for [HTML5 microdata](http://schema.org/docs/gs.html).
|
||||
- `unselectable` for Internet Explorer.
|
||||
- `security` 老的IE浏览器.
|
||||
- `unselectable` IE浏览器.
|
||||
- `results autoSave` for WebKit/Blink input fields of type `search`.
|
||||
|
||||
同样有React规范的属性 `dangerouslySetInnerHTML` ([more here](/react/docs/special-non-dom-attributes.html)),用于直接插入HTML字符串到组件里.
|
||||
|
||||
@@ -139,6 +139,7 @@ DOMEventTarget relatedTarget
|
||||
|
||||
焦点事件在所有的React DOM上工作,不仅仅是表单元素.
|
||||
|
||||
|
||||
### 表单事件
|
||||
|
||||
事件名称：
|
||||
@@ -246,7 +247,8 @@ number deltaY
|
||||
number deltaZ
|
||||
```
|
||||
|
||||
### Media Events
|
||||
|
||||
### 媒体事件
|
||||
|
||||
事件名称:
|
||||
|
||||
@@ -254,10 +256,45 @@ number deltaZ
|
||||
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting
|
||||
```
|
||||
|
||||
### Image Events
|
||||
|
||||
### 图片事件
|
||||
|
||||
事件名称:
|
||||
|
||||
```
|
||||
onLoad onError
|
||||
```
|
||||
|
||||
|
||||
### 动画事件
|
||||
|
||||
事件名称:
|
||||
|
||||
```
|
||||
onAnimationStart onAnimationEnd onAnimationIteration
|
||||
```
|
||||
|
||||
属性：
|
||||
|
||||
```javascript
|
||||
string animationName
|
||||
string pseudoElement
|
||||
float elapsedTime
|
||||
```
|
||||
|
||||
|
||||
### Transition Events
|
||||
|
||||
事件名称:
|
||||
|
||||
```
|
||||
onTransitionEnd
|
||||
```
|
||||
|
||||
属性：
|
||||
|
||||
```javascript
|
||||
string propertyName
|
||||
string pseudoElement
|
||||
float elapsedTime
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user