使用creat-react-app的单页面应用 其中的组件有两种写法, 一种是函数组件一种是class组件
函数组件:使用一个函数来定义组件,参数为props(父级传入的参数) 返回的是一个React元素,本质上就是JavaScript函数
Class组件:
使用构造器子类继承父类的props
constructor (props) {
super(props)
}
使用es5的函数组件方式来写
function User (props) {
console.log(props)
let name = '自定义的字段'
const numbers = props.numbers
const listItems = numbers.map((x,index) =>
<li key={index}>{x}</li>
)
const outerName = props.outerName
return (
<div className="User">
<ul>
<li>{name}</li>
<li>父级元素传输的{outerName}</li>
{listItems}
</ul>
</div>
)
}
export default User;
使用es6的class组件方式来写
import React, {Component} from 'react'
class User extends Component {
constructor(props) {
super(props);
this.state = {
name: '自定义字段',
arr:[11,21,34],
listItems: null
};
}
render () {
return (
<div>
{this.state.name}
<ul>
{
this.props.numbers.map(item => (
<li key={item}>{item}</li>
))
}
</ul>
</div>
)
}
}
export default User