昨晚想了一個(gè)可選擇的DOM元素的React按鈕組件酿联，組件內(nèi)置了兩個(gè)DOM元素，除了內(nèi)置的DOM元素，還可以在<code>Render()</code>渲染的時(shí)候坦喘，添加可選項(xiàng)來(lái)自定義Dom元素。<p>
直接上code
import React from 'react';
import ReactDOM from 'react-dom';
const Button=React.createClass({
//設(shè)置props驗(yàn)證方式
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默認(rèn)屬性
getDefaultProps(){
return{
active:true,
disabled:true
}
},
//初始化狀態(tài)
getInitialState(){
},
//默認(rèn)<a></a>的渲染
renderADom(classname){
let{
href,
component:Component,
children,
props
}=this.props;
Component=Component||'a';//默認(rèn)a標(biāo)簽
href=href||'#'
return <Component {...props} href={href} className={classname}>
{children}
</Component>
},
//默認(rèn)<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';//默認(rèn)渲染button標(biāo)簽
return this[renderType](classn)
}
})
export default Button
index.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import Button from './components/Button';
//下面這個(gè)是渲染a標(biāo)簽西设，className是success類(lèi)名
ReactDOM.render(<Button classn={"success"} target={"a"}/>,document.getElementById('app'))
//下面這個(gè)是默認(rèn)渲染button標(biāo)簽瓣铣，className是fail類(lèi)名
ReactDOM.render(<Button classn={"fail"} />,document.getElementById('app'))
//下面這個(gè)是渲染a標(biāo)簽，className是fail類(lèi)名 鏈接設(shè)置href
ReactDOM.render(<Button classn={"fail"} target={'a'} href={http://'www.baidu.com'} />,document.getElementById('app'))
//下面這個(gè)渲染是自定義的span標(biāo)簽
ReactDOM.render(<Button classn={"fail"} component={'span'}/>,document.getElementById('app'))
