组件的两大属性:state props
1. 工厂函数组件
// 1. 工厂函数组件
function Simple() {
return <h2>我是简单组件</h2>
}
ReactDOM.render(<Simple/>,document.getElementById("app"))
2. ES6类组件 (复杂组件)
// 2. ES6类组件 (复杂组件)
class Complex extends React.Component{
render(){
return (
<h2>我是复杂组件</h2>
)
}
}
ReactDOM.render(<Complex/>,document.getElementById("app1"))
注意点:
- 无论是工厂函数组件还是ES6类组件,函数名或类名首字母都需要大写。
return
需要有根标签。
- 标签必须闭合。
state
<script type="text/babel" >
// 2. ES6类组件 (复杂组件) state
class Complex extends React.Component{
constructor(props){
super(props)
this.state = {
msg: "呵呵呵",
flag:true
}
// this.click = this.click.bind(this)
}
// click(){
// const {flag}= this.state
// this.setState({
// flag:!flag
// })
// }
click = () => {
const {flag}= this.state
this.setState({
flag:!flag
})
}
render(){
const {msg,flag} = this.state;
let res = flag ? '呵呵呵':'哈哈哈'
return (
<div>
<h2 onClick={this.click}>{res}</h2>
</div>
)
}
}
ReactDOM.render(<Complex/>,document.getElementById("app"))
</script>
props
<script type="text/babel" >
// 2. ES6类组件 (复杂组件) props
class Complex extends React.Component{
constructor(props){
super(props)
}
render(){
let {name,age,sex} = this.props
return (
<div>
<h2>姓名:{name}</h2>
<h2>年龄:{age}</h2>
<h2>性别:{sex}</h2>
</div>
)
}
}
let person = {
name: '张三三',
sex: '男',
age: 19
}
// 验证类型
Complex.propTypes = {
name:PropTypes.string.isRequired
}
Complex.defaultProps = {
sex:'男',
age:18
}
ReactDOM.render(<Complex {...person} />,document.getElementById("app"))
</script>
组件refs属性以及组件之间的传值
<script type="text/babel" >
class Add extends React.Component{
add = () => {
// console.log(this.input.value)
// console.log(this.props.allAdd)
this.props.allAdd(this.input.value)
this.input.value=''
}
render(){
console.log(this.props)
return(
<div>
<input type="text" ref={(input)=>{this.input=input}} />
<button onClick={this.add}>add#3</button>
</div>
)
}
}
class List extends React.Component{
render(){
console.log(this.props)
const {list} = this.props
return(
<div>
<ul>
{
list.map((v,i) => {
return <li key={i}>{v}</li>
})
}
</ul>
</div>
)
}
}
class App extends React.Component{
state = {
list:[
'吃饭',
'睡觉',
'打游戏',
]
}
add = (value)=> {
// console.log(value)
const {list} = this.state
list.unshift(value) //unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
this.setState({
list
})
}
render(){
const {list} = this.state
return(
<div>
<Add allAdd={this.add}/>
<List list={list}/>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('app'))
</script>