神刀安全网

React Div – Like the normal HTML <div/> but better

React Div - Like the normal HTML &lt;div/&gt; but better React Div - Like the normal HTML &lt;div/&gt; but better

React Div

Like the normal HTML <div/> but better.

Why?

When you’d like to display show/none , you probably do this everytime:

render() {   const style = {     display: show ? '' : 'none'   }   return (     <div style={style} />   ) }

And we’re always dynamic add/remove class inconvenient:

or thro theJedWatson/classnames

const classNames = require('classnames') render() {   const css = {     foo: true,     bar: false       }   return (     <div className={`a b c ${classNames(css)`} />   ) }

Stop do stupid today. React Div is your new friender.

Default Props

static propTypes = {     css: React.PropTypes.object,     style: React.PropTypes.object,     show: React.PropTypes.bool,     hide: React.PropTypes.bool,     className: React.PropTypes.string,   }    static defaultProps = {     css: {},     style: {},     show: true,     hide: false,     className: ''   }

Examples

show

const Div = require('react-div') render() {   return <Div show={false} style={{color: 'red'}}>This is Dev Component</Div> }

output:

<div style="display: none; color: red;">This is Dev Component</div>

css

const Div = require('react-div') const css = {     foo: true,     bar: false } render() {   return <Div className="a b" css={css} /> }

output:

<div class="a b foo"></div>

hide

Sometime we don’t want to render DOM, you can pass hide props:

const Div = require('react-div') render() {   return <Div hide={true} /> }

output nothing:

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » React Div – Like the normal HTML <div/> but better

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮