一種更靈(hun)活(luan)的React的組件方式

前面一個文章僚匆,寫了一個內(nèi)置組件并且可以自由定義的組件后憋飞,原理就是內(nèi)置了兩個軟件方法,可以根據(jù)prop傳進去的值進行對應(yīng)的選擇争剿,或者自定義傳進去一個已艰,進行渲染。<p>
我又查資料總結(jié)了一個更加靈(hun)活(luan)的組件寫法蚕苇,這種寫法實在不敢恭維哩掺,自己寫起來都亂,不過功能都實現(xiàn)了涩笤,大家可以看一下嚼吞。然后我把用法寫一下,希望給大家一點啟發(fā)蹬碧。<p>
這里用到一個方式舱禽,是在一個組件BOX上利用<code>.</code>的語法,在其屬性上又添加了一個組件锰茉,調(diào)用的時候就是<code>BOX.child</code>呢蔫,組件BOX內(nèi)可以隨意使用。

/**
 * 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{

    }
  },
//定義一個內(nèi)部方法,當組件有tittle屬性的時候就會觸發(fā)
  renderTittle(tittle){
    let{
        classTittle
      }=this.props;
    return <h2 className={classTittle}>{tittle}</h2>
  },
//內(nèi)部渲染具體組件的容器片吊,用來裝載BOX.child小組件
  renderContent(element,role){
//通過結(jié)構(gòu)绽昏,把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'));
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末认然,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子漫萄,更是在濱河造成了極大的恐慌卷员,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件腾务,死亡現(xiàn)場離奇詭異毕骡,居然都是意外死亡,警方通過查閱死者的電腦和手機岩瘦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門未巫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人启昧,你說我怎么就攤上這事叙凡。” “怎么了密末?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵握爷,是天一觀的道長。 經(jīng)常有香客問我严里,道長饼拍,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任田炭,我火速辦了婚禮,結(jié)果婚禮上漓柑,老公的妹妹穿的比我還像新娘教硫。我一直安慰自己,他們只是感情好辆布,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布瞬矩。 她就那樣靜靜地躺著,像睡著了一般锋玲。 火紅的嫁衣襯著肌膚如雪景用。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天,我揣著相機與錄音伞插,去河邊找鬼割粮。 笑死,一個胖子當著我的面吹牛媚污,可吹牛的內(nèi)容都是我干的舀瓢。 我是一名探鬼主播,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼耗美,長吁一口氣:“原來是場噩夢啊……” “哼京髓!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起商架,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤堰怨,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蛇摸,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體备图,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年皇型,在試婚紗的時候發(fā)現(xiàn)自己被綠了诬烹。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡弃鸦,死狀恐怖绞吁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情唬格,我是刑警寧澤家破,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站购岗,受9級特大地震影響汰聋,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜喊积,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一烹困、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧乾吻,春花似錦髓梅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至诡必,卻和暖如春奢方,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工蟋字, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留稿蹲,地道東北人。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓愉老,卻偏偏與公主長得像场绿,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子嫉入,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,116評論 25 707
  • 目前焰盗,react組件有三種寫法,分別是es5的createClass寫法咒林,es6的class寫法熬拒,以及statel...
    ZoomFunc閱讀 1,654評論 0 1
  • It's a common pattern in React to wrap a component in an ...
    jplyue閱讀 3,266評論 0 2
  • 回文詞:始見北宋,這與宋詞創(chuàng)作繁榮有關(guān)系垫竞。元明回文詞極少澎粟。此后清詞繼起,回文詞可與宋代匹敵欢瞪。下面是本人回文式填詞數(shù)...
    aaron1797閱讀 566評論 2 1
  • 所謂成長就是不斷"打臉"的過程活烙,要承認自己的愚蠢,試圖去隱蓋愚蠢遣鼓,只會讓自已更加愚蠢啸盏。 在股票投資中,什么最重要骑祟,...
    老吳來了閱讀 444評論 0 0