亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

react.children.map 不能接受對象數組嗎

react.children.map 不能接受對象數組嗎

慕雪6442864 2018-11-25 04:00:16
react.children.map 不能接受對象數組嗎
查看完整描述

1 回答

?
牛魔王的故事

TA貢獻1830條經驗 獲得超3個贊

一個組件,有自己的結構,有自己的邏輯,有自己的樣式,會依賴一些資源,會依賴某些其他組件。比如日常寫一個組件,比較常規的方式:

- 通過前端模板引擎定義結構

- JS文件中寫自己的邏輯

- CSS中寫組件的樣式

- 通過RequireJS、SeaJS這樣的庫來解決模塊之間的相互依賴,

那么在React中是什么樣子呢?

結構和邏輯

在React的世界里,結構和邏輯交由JSX文件組織,React將模板內嵌到邏輯內部,實現了一個JS代碼和HTML混合的JSX。

結構

在JSX文件中,可以直接通過 React.createClass 來定義組件:

var CustomComponent = React.creatClass({
render: function(){
return (<div className="custom-component"></div>);
}
});

通過這種方式可以很方便的定義一個組件,組件的結構定義在render函數中,但這并不是簡單的模板引擎,我們可以通過js方便、直觀的操控組件結構,比如我想給組件增加幾個節點:

var CustomComponent = React.creatClass({
render: function(){
var $nodes = ['h','e','l','l','o'].map(function(str){
return (<span>{str}</span>);
});
return (<div className="custom-component">{$nodes}</div>);
}
});

通過這種方式,React使得組件擁有靈活的結構。那么React又是如何處理邏輯的呢?

邏輯

寫過前端組件的人都知道,組件通常首先需要相應自身DOM事件,做一些處理。必要時候還需要暴露一些外部接口,那么React組件要怎么做到這兩點呢?

事件響應

比如我有個按鈕組件,點擊之后需要做一些處理邏輯,那么React組件大致上長這樣:

var ButtonComponent = React.createClass({
render: function(){
return (<button>屠龍寶刀,點擊就送</button>);
}
});



查看完整回答
反對 回復 2018-12-19
  • 1 回答
  • 0 關注
  • 768 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號