定义组件最简单的方式就是编写 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')
);
启动后展示
回顾一下这个例子中发生了什么:
注意: 组件名称必须以大写字母开头。
我们可以创建一个可以多次渲染 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')
);
最后展示结果
这就是一个简单的组件的编写,当然,我们还可以将组件进一步的拆分,我们在后续的课程中,会给大家持续分享相关的知识。