function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
我们来回顾一下在这个例子中发生了什么:
- 我们对
<Welcome name="Sara" />
元素调用了ReactDOM.render()
方法。 - React将
{name: 'Sara'}
作为props传入并调用Welcome
组件。 Welcome
组件将<h1>Hello, Sara</h1>
元素作为结果返回。- React DOM将DOM更新为
<h1>Hello, Sara</h1>
。
在这个栗子中, Welcome 是自定义的元素, Welcome函数组件必须和这个元素名子一样。