如何写react组件

如何写react组件

组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石元素。

React支持三种方式来定义组件

● 函数式定义的无状态组件

● Es5原生方式React.createClass定义的组件

● Es6形式的extends React.Component定义的组件

一、无状态组件

function Nav(props) {
  return <div>{props.name} UED</div>
}
ReactDOM.render(<Nav name="Yuandian" />, rootNode)

二、es5方式创建组件

var Nav = React.createClass({
    getInitialState:function(){
      return {
           name:'Yuandian'
      };
    },
    render:function(){
        return  <div onClick={this._ClickEvent}>{this.state.name} UED</div>
    },
    _ClickEvent:function(){
        console.log(`This is ${this.state.name} UED`)
    }
})

三、es6方式创建组件

class Nav extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Yuandian'
        };
        this._ClickEvent= this._ClickEvent.bind(this);
    }
    render() {
        return  <div onClick={this._ClickEvent}>{this.state.name} UED</div>
    },
    _ClickEvent(){
        console.log(`This is ${this.state.name} UED`)
    }
}

更多React相关技术文章，请访问React答疑栏目进行学习！

以上就是如何写react组件的详细内容，更多请关注易知道|edz.cc其它相关文章！