测开技能--Web开发 React 学习（六）组件
定义组件最简单的方式就是编写 JavaScript 函数：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}还可以使用 ES6 的 class 来定义组件：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}上述两个组件在 React 里是等效的。
React 元素也可以是用户自定义的组件：
const element = <Welcome name="上海" />;然后代码如下
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: '北京',
lastName: '欢迎你'
};
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="上海"/>
ReactDOM.render(
element,
document.getElementById('root')
);启动后展示
回顾一下这个例子中发生了什么：
- 我们调用 ReactDOM.render() 函数，并传入 <Welcome name="上海" /> 作为参数。
- React 调用 Welcome 组件，并将 {name: '上海'} 作为 props 传入。
- Welcome 组件将 <h1>Hello, 上海</h1> 元素作为返回值。
- React DOM 将 DOM 高效地更新为 <h1>Hello, 上海</h1>。
注意： 组件名称必须以大写字母开头。
我们可以创建一个可以多次渲染 Welcome 组件的 App 组件。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function Appone() {
return (
<div>
<Welcome name="上海" > </Welcome>
<Welcome name="深圳" ></Welcome>
<Welcome name="浙江" > </Welcome> </div>
);
}
ReactDOM.render(
<Appone />,
document.getElementById('root')
);最后展示结果
这就是一个简单的组件的编写，当然，我们还可以将组件进一步的拆分，我们在后续的课程中，会给大家持续分享相关的知识。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-07-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
