React简单组件的创建与使用

React简单组件的创建与使用

原文地址：React简单组件的创建与使用

创建React组件

通过定义一个class继承React.Component来创建一个React组件

class Header extends React.Component{
    //组件内必须要有render函数
    render(){
        //返回组件的模板
        return <p onClick={this.clickFun}>我是一个Header</p>
    }
}

使用React组件

将我们之前的组件直接放入需要渲染的dom中

const app = (
    <div>
        <Header></Header>
        <Header />
    </div>
)
//获取需要渲染的节点
const root = document.getElementById('app')
//将创建的app节点渲染进页面中
ReactDOM.render(app, root)

给组件传值

建立组件后，若是我们使用组件免不了需要传值，下面介绍下如何给组件传值

//定义一个子组件
class Header extends React.Component{
    render(){
        //可以获取传值进来的内容
        //this为当前组件的对象
        console.log(this.props)
        return <p>我是一个Header</p>
    }
}

const app = (
	<div>
        <！--给组件传值-->
    	<Header title="标题" />
    </div>
)
const root = document.getElementById("app")
ReactDOM.render(app,root)

添加事件

给子组件添加一个点击事件

class Header extends React.Component{
    //定义一个点击的方法
    clickFun(){
        console.log(点击了Header)
    }
    render(){
        //添加点击事件
        return <p onClick={this.clickFun}>我是一个Header</p>
    }
}
const app = (
    <div>
        <Header></Header>
        <Header />
    </div>
)
const root = document.getElementById('app')
ReactDOM.render(app, root)

点击事件方法的this指向问题解决办法：

//1.直接使用bind()方法改变this指向
class Header extends React.Component{
    clickFun(){
        console.log(this.props)
    }
    render(){
        return <p onClick={this.clickFun.bind(this)}>我是一个Header</p>
    }
}

//2.通过constructor将方法的this指向一直绑定在this上
//constructor 是一种用于创建和初始化class创建的对象的特殊方法。
class Header extends React.Component{
    constructor(props){
        super(props);
        this.clickFun = this.clickFun.bind(this)
    }
    clickFun(){
        console.log(this.props)
    }
    render(){
        return <p onClick={this.clickFun}>我是一个Header</p>
    }
}

注意：

1. 组件命名最好首字母大写，避免与原生的节点名称冲突
2. key值为特殊字段，通过组件传值无法获取