昨晚想了一个可选择的DOM元素的React按钮组件，组件内置了两个DOM元素，除了内置的DOM元素，还可以在<code>Render()</code>渲染的时候，添加可选项来自定义Dom元素。<p>
直接上code

import React from 'react';
import ReactDOM from 'react-dom';
const Button=React.createClass({
//设置props验证方式
    propsTypes:{
          component:React.PropTypes.node,
          classn:React.PropTypes.string,
          active:React.PropTypes.bool,
          href:React.PropTypes.string,
          disabled:React.PropTypes.bool,
          target:React.PropTypes.string
    },
//props默认属性
   getDefaultProps(){
        return{
            active:true,
            disabled:true
        }
    },
//初始化状态
   getInitialState(){

   },
//默认<a></a>的渲染
   renderADom(classname){
       let{
             href,
             component:Component,
             children,
             props 
        }=this.props;
        Component=Component||'a';//默认a标签
        href=href||'#'
        return <Component {...props}  href={href} className={classname}>
                  {children}
          </Component>
   },
//默认<button></button>的渲染
   renderButtonDom(classname){
      let{
          href,
          component:Component,
          children,
          props
      }=this.props;
      Component=Component||'button';
      return <Component {...props} className={classname}>
              {children}
      </Component>
   },
  render(){
      let{
        href,
        active,
        target,
        classn
      }=this.props;
      let renderType=href || target?'renderADom':'renderButtonDom';//默认渲染button标签
      return this[renderType](classn)
  }
})
export default Button

index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './components/Button';
//下面这个是渲染a标签，className是success类名
ReactDOM.render(<Button classn={"success"} target={"a"}/>,document.getElementById('app'))
//下面这个是默认渲染button标签，className是fail类名
ReactDOM.render(<Button classn={"fail"} />,document.getElementById('app'))
//下面这个是渲染a标签，className是fail类名 链接设置href
ReactDOM.render(<Button classn={"fail"}  target={'a'} href={http://'www.baidu.com'} />,document.getElementById('app'))
//下面这个渲染是自定义的span标签
ReactDOM.render(<Button classn={"fail"}  component={'span'}/>,document.getElementById('app'))