react组件设计和分解

react组件设计和分解

1.切割render

const PanelHeader = (props) => (
// ...
)

const PanelBody = (props) => (
// ...
)
class Panel extends React.Component {
    render() {
        return (
            

                
                
            
        );
    }
}

2.模块化组件

相当于一个模版，根据传入参数进行不同的渲染
class commentTemplate extends React.Component(){
    static propTypes = {
        actions:propTypes.node
    }

    render(){
        
{this.props.actions}
    }
}

class comment extends React.Component(){
    render(){
        const actions = [];

        if(this.props.condition){
        actions.push()
        }else{
        actions.push()
        }
        return 
    }
}

3.高阶组件

高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件
function noId() {
  return function(Comp) {
    return class NoID extends Component {
      render() {
        const {id, ...others} = this.props;
        return (
          
        )
      }
    }
  }
}

const WithoutID = noId()(Comp);