怎么封装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其它相关文章!

推荐阅读