組件可以將UI切分成一些獨(dú)立的、可復(fù)用的部件熬词。
組件從概念上看就像是函數(shù)栅表,它可以接收任意的參數(shù)(props)笋鄙,返回一個需要在頁面上展示的React元素。
一怪瓶、組件的定義方式
1局装、使用JavaScript函數(shù)
function Welcome(props) {
????return Hello, {props.name};
}
2、es6的Class類
class Welcome extends React.Component {
????render() {
????????return Hello, {this.props.name};
????}
}
二劳殖、組件之間傳值
? ? 現(xiàn)在有兩個組件,父組件Parent和子組件Children拨脉,子組件Children可以通過“props”接收Parent組件傳遞的值(也可以是一個方法)
代碼事例:
1 父組件
// 父組件Parent
import React, { Component } from 'react';
// 引入子組件 import Children from './children';
export default class extends Component {
????// 組件的狀態(tài)(數(shù)據(jù))
????state = { number: 0 }
????onClickEvent = () => {
????????console.log('onClickEvent')
????????let { number } = this.state;
????????this.setState({ number: number+1 })
????}
????render () {
????????return (
????????????{/* 父組件傳值給子組件可以是具體數(shù)據(jù)或是方法 */}
????????????<Children
? ? ? ? ? ? ? ? number={this.state.number}
? ? ? ? ? ? ? ? chilk={this.onClickEvent}
????????????/>
????????)
????}
}