怎么封装react组件

怎么封装react组件

1、封装自己的组件

使用es6的扩展类的方式，在基类中扩展组件。

import React, { Component } from 'react';
class ClickCounter extends Component{
    constructor(props){
        //当父组件向子组件传递数据时，需要在这里传入props。
        super(props);
        //由于事件函数onClickButton不是在render函数中定义的，
        //所以需要通过bind绑定this指向。
        this.onClickButton=this.onClickButton.bind(this);
        //通过state来定义当前组件内部自己的数据
        this.state={count:0};
    }
    onClickButton(){
        //通过setState方法 来改变state对象中的值。
        this.setState(
            {
            count:this.state.count+1
            }
        );
    }
    render(){
        //在render中定义样式，必须使用对象的方式。
        const counterStyle={
            margin:'16px',
            fontSize:'24px'
        };
        return (
            {/*在jsx中，使用这个方式进行注释 */}
            {/*在jsx中，使用在render函数中，定义的样式*/}
            <div style={counterStyle}>
                {/*在jsx中，使用onClick方式进行事件绑定，
                不同于html行内事件绑定，原理参考jsx文章*/}
                <button onClick={this.onClickButton}>
                    Click me
                </button>
                <div>
                    Click Count:
                    <span id="clickCount">
                        {this.state.count}
                    </span>
                </div>
            </div>
        );
    }
}
//导出当前定义的组件
export default ClickCounter;

2、使用自定义组件

引入react，使用es6的import...from...方式导入，对应着需要使用export default... 导出。

另外，如果需要dom操作，需要引入react-dom。

使用es6的解构赋值，单独引入Component。

注意：

（1）React必须引入，由于JSX最终会被转译成依赖React的表达式。

（2）Component 是所有组件的基类。

import React, { Component } from 'react';
import ClickCounterfrom './ClickCounter/ClickCounter'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h2>标题</h2>
        <ClickCounter></ClickCounter>
      </div>
    );
  }
}
export default App;

本文来自React答疑栏目，欢迎学习！

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