4.2 Rendering a Component 渲染一个组件

Previously, we only encountered React elements that represent DOM tags:

以前，我们只会遇到表示DOM标签的React元素。

const element =

;

However, elements can also represent user-defined components:

同样，元素也能够表示用户自定义组件：

const element = ;

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".

当我们看见一个元素表示用户自定义组件，它把JSX属性作为一个单独对象传递给这个组件。我们称这个对象为“props”。

For example, this code renders "Hello, Sara" on the page:

举个例子，这段代码在页面上渲染出“Hello, Sara”：

function Welcome(props) {
return

Hello, {props.name}

;
}
const element = ;
ReactDOM.render(
element,
document.getElementById('root')
);

Try it on CodePen.

在CodePen中尝试。

Let's recap what happens in this example:

让我们回顾一下刚刚的事例都做了什么：

1.We call ReactDOM.render() with the element.

1.我们调用ReactDOM.render()来渲染元素

2.React calls the Welcome component with {name: 'Sara'} as the props.

2.React 调用一个使用{name: 'Sara'}做为props的Welcome组件。

3.Our Welcome component returns a

Hello, Sara

element as the result.

3.我们的welcome组件返回

Hello, Sara

元素做为结果。

4.React DOM efficiently updates the DOM to match

Hello, Sara

.

4.React DOM 及时有效的更新DOM去匹配

Hello, Sara

。

Caveat:
Always start component names with a capital letter.
For example,

represents a DOM tag, butrepresents a component and requires Welcome to be in scope.

警告：
通常组件名称的开头是个大写字母。

例如，

表示一个DOM标签，但是表示一个组件并且要求Welcome在作用域内。