一种更灵（hun）活（luan）的React的组件方式

前面一个文章，写了一个内置组件并且可以自由定义的组件后，原理就是内置了两个软件方法，可以根据prop传进去的值进行对应的选择，或者自定义传进去一个，进行渲染。<p>
我又查资料总结了一个更加灵（hun）活（luan）的组件写法，这种写法实在不敢恭维，自己写起来都乱，不过功能都实现了，大家可以看一下。然后我把用法写一下，希望给大家一点启发。<p>
这里用到一个方式，是在一个组件BOX上利用<code>.</code>的语法，在其属性上又添加了一个组件，调用的时候就是<code>BOX.child</code>，组件BOX内可以随意使用。

/**
 * Created by tiantan on 2016/5/31.
 */
import React from 'react';
import ReactDOM from 'react-dom';
//BOX组件
const BOX=React.createClass({
//定义prop类型
  propsTypes:{
    tittle:React.PropTypes.string,
    header:React.PropTypes.string,
    body:React.PropTypes.string,
    footer:React.PropTypes.string,
    classOuterBox:React.PropTypes.string,
    classTittle:React.PropTypes.string,
    classInnerBox:React.PropTypes.string
  },
//定义默认props
  getDefaultProps(){
    return{
      classn:'box'
    }
  },
  getInitialState(){
    return{

    }
  },
//定义一个内部方法，当组件有tittle属性的时候就会触发
  renderTittle(tittle){
    let{
        classTittle
      }=this.props;
    return <h2 className={classTittle}>{tittle}</h2>
  },
//内部渲染具体组件的容器，用来装载BOX.child小组件
  renderContent(element,role){
//通过结构，把this.props中的值存入let {}中
    let{
        classBox
      }=this.props;
    return <BOX.child role={role} className={classBox}>{element}</BOX.child>
  },
  render(){
    let{
      tittle,
      header,
      body,
      footer,
      classOuterBox,
      classTittle,
      classInnerBox,
      props,
      children
      }=this.props;
    return <div className={classOuterBox} {...props}>//定义外层样式
      {tittle?this.renderContent(this.renderTittle(tittle)):this.renderContent(header)}；
//通过判断有无传入tittle来，进行具体些选择，如何渲染。
        <div classNmae={classInnerBox}>//通过classInnerBox来渲染
          {children}
        </div>
      {this.renderContent(footer,'footer')}；//渲染页脚
    </div>
  }
});
//BOX子组件
BOX.child=React.createClass({
//子组件定义props类型
  propsTypes:{
    cover:React.PropTypes.string,
    element:React.PropTypes.string,
    role:React.PropTypes.string
  },
//定义默认props
  getDefaultProps(){
    return{
      role:'header'
    }
  },
  render(){
    let {
        role,
        classname,
        cover,
        props
      }=this.props;
//定义背景
    if(cover){
    var style={
        backgroundImage:'url('+cover+')',
      }
    }
    return <span {...props} className={role?role+"style":classname}  style={style}>
      {this.props.children}
    </span>
  }
});
export default BOX;

下面是大概几种样式

ReactDOM.render(<Box.child classname="headerstyle" >123</Box.child>,document.getElementById('app'));
ReactDOM.render(<Box tittle="标题" classOuterBox="boxContent"></Box>,document.getElementById('app'));
ReactDOM.render(<Box header="this header"  classOuterBox="boxContent">123123</Box>,document.getElementById('app1'));