Docs: do not render components to `document.body`
Rendering to `document.body` in the examples is conveniently short, but it can be misleading at the same time, especially for newcomers. While it's possible to render React components to `document.body`, any 3rd party scripts can also mess up with it, and it can have unintended consequences and be source of difficult-to-trace bugs.
This commit is contained in:
parent
5dee15273f
commit
d83596620f
|
@ -60,7 +60,7 @@ React.renderComponent(
|
|||
<option value="Facebook">Facebook</option>
|
||||
<option value="Harvest">Harvest</option>
|
||||
</Chosen>
|
||||
, document.body);
|
||||
, document.getElementById('example'));
|
||||
```
|
||||
|
||||
|
||||
|
|
|
@ -38,7 +38,7 @@ When you name your file with `myfile.js.jsx`, `react-rails` will automatically t
|
|||
|
||||
```js
|
||||
/** @jsx React.DOM */
|
||||
React.renderComponent(<MyComponent/>, document.body)
|
||||
React.renderComponent(<MyComponent/>, document.getElementById('example'))
|
||||
```
|
||||
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@ React.renderComponent((
|
|||
</Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
), document.body);
|
||||
), document.getElementById('example'));
|
||||
```
|
||||
|
||||
## Going Big with React
|
||||
|
|
|
@ -106,7 +106,7 @@ JSX is completely optional; you don't have to use JSX with React. You can create
|
|||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
As a convenience you can create short-hand factory functions to create elements from custom components.
|
||||
|
@ -115,7 +115,7 @@ As a convenience you can create short-hand factory functions to create elements
|
|||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React already has built-in factories for common HTML tags:
|
||||
|
|
|
@ -104,7 +104,7 @@ JSX 类似于 HTML,但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx
|
|||
```javascript
|
||||
var child = React.createElement('li', null, 'Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child);
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
方便起见,你可以创建基于自定义组件的速记工厂方法。
|
||||
|
@ -113,7 +113,7 @@ React.render(root, document.body);
|
|||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React 已经为 HTML 标签提供内置工厂方法。
|
||||
|
|
|
@ -26,7 +26,7 @@ To render a HTML tag, just use lower-case tag names in JSX:
|
|||
|
||||
```javascript
|
||||
var myDivElement = <div className="foo" />;
|
||||
React.render(myDivElement, document.body);
|
||||
React.render(myDivElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
To render a React Component, just create a local variable that starts with an upper-case letter:
|
||||
|
@ -34,7 +34,7 @@ To render a React Component, just create a local variable that starts with an up
|
|||
```javascript
|
||||
var MyComponent = React.createClass({/*...*/});
|
||||
var myElement = <MyComponent someProperty={true} />;
|
||||
React.render(myElement, document.body);
|
||||
React.render(myElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.
|
||||
|
|
|
@ -28,7 +28,7 @@ React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
|
|||
|
||||
```javascript
|
||||
var myDivElement = <div className="foo" />;
|
||||
React.render(myDivElement, document.body);
|
||||
React.render(myDivElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
要渲染 React 组件,只需创建一个大写字母开头的本地变量。
|
||||
|
@ -36,7 +36,7 @@ React.render(myDivElement, document.body);
|
|||
```javascript
|
||||
var MyComponent = React.createClass({/*...*/});
|
||||
var myElement = <MyComponent someProperty={true} />;
|
||||
React.render(myElement, document.body);
|
||||
React.render(myElement, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。
|
||||
|
|
|
@ -41,7 +41,7 @@ React.render(
|
|||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.body
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
@ -78,7 +78,7 @@ React.render(
|
|||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.body
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
|
|
@ -42,7 +42,7 @@ React.render(
|
|||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.body
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
@ -76,7 +76,7 @@ React.render(
|
|||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
|
||||
Hello world!
|
||||
</FancyCheckbox>,
|
||||
document.body
|
||||
document.getElementById('example')
|
||||
);
|
||||
```
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@ var root = React.createElement('div');
|
|||
To render a new tree into the DOM, you create `ReactElement`s and pass them to `React.render` along with a regular DOM `Element` (`HTMLElement` or `SVGElement`). `ReactElement`s are not to be confused with DOM `Element`s. A `ReactElement` is a light, stateless, immutable, virtual representation of a DOM `Element`. It is a virtual DOM.
|
||||
|
||||
```javascript
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
To add properties to a DOM element, pass a properties object as the second argument and children to the third argument.
|
||||
|
@ -32,7 +32,7 @@ To add properties to a DOM element, pass a properties object as the second argum
|
|||
```javascript
|
||||
var child = React.createElement('li', null, 'Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child);
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
If you use React JSX, then these `ReactElement`s are created for you. So this is equivalent:
|
||||
|
@ -41,7 +41,7 @@ If you use React JSX, then these `ReactElement`s are created for you. So this is
|
|||
var root = <ul className="my-list">
|
||||
<li>Text Content</li>
|
||||
</ul>;
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
__Factories__
|
||||
|
@ -59,7 +59,7 @@ It allows you to create a convenient short-hand instead of typing out `React.cre
|
|||
```javascript
|
||||
var div = React.createFactory('div');
|
||||
var root = div({ className: 'my-div' });
|
||||
React.render(root, document.body);
|
||||
React.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
React already has built-in factories for common HTML tags:
|
||||
|
@ -122,14 +122,14 @@ var element = <MyComponent />;
|
|||
When this is passed to `React.render`, React will call the constructor for you and create a `ReactComponent`, which returned.
|
||||
|
||||
```javascript
|
||||
var component = React.render(element, document.body);
|
||||
var component = React.render(element, document.getElementById('example'));
|
||||
```
|
||||
|
||||
If you keep calling `React.render` with the same type of `ReactElement` and the same container DOM `Element` it always returns the same instance. This instance is stateful.
|
||||
|
||||
```javascript
|
||||
var componentA = React.render(<MyComponent />, document.body);
|
||||
var componentB = React.render(<MyComponent />, document.body);
|
||||
var componentA = React.render(<MyComponent />, document.getElementById('example'));
|
||||
var componentB = React.render(<MyComponent />, document.getElementById('example'));
|
||||
componentA === componentB; // true
|
||||
```
|
||||
|
||||
|
|
Loading…
Reference in New Issue