React屬性有哪些？關於react屬性、事件與共享的使用詳解

本篇文章主要的講述了關於react中的屬性的使用，還有關於react的事件與共享的使用，接下來就讓我們閱讀這篇文章吧

本文主要講解React中關於屬性的使用、React特有的標籤取得以及React共享的使用等，具體如下：

• React的State屬性

• React的Props屬性

• React事件綁定與資料雙向互動

• #React元件的複用與驗證

• React元件的Refs

• React獨立元件之間共用操作Mixins

1、State屬性

• React的狀態機，用於改變自身模組的資料；

• state作用域只屬於目前類，不會污染其他模組；

• 初始化：this.state = {username: “XXX”};

• 初始化的state設定放置在建構函數constructor裡面；

• 修改state：this.setState({username: “AAA”});

• #總結：state是模組本身屬性的設定。

2、Props屬性

• props是對於模組來說屬於外來屬性（父子級資料傳遞）

• 傳遞的方式需要參數設定；

• 在接收模組中使用：this.props.xxx;

#3、事件綁定與資料雙向交互作用

3.1 事件綁定

• #第一種：在建構子constructor中綁定this：this.focus = this.focus. bind(this);

• 或呼叫綁定：onClick={this.focus.bind(this,99)}
  

• （bind的值中this用於綁定模板，99用於參數傳遞）

#3.2 資料的雙向綁定

• 父級傳遞給子級(es5遵循)

• 子級頁面向父級頁面傳遞參數
  

• 在子頁面中透過呼叫父頁傳遞過來的事件props 進行群組價間的參數傳遞

• #使用onChange事件可是進行即時監聽

#3.3 資料的請求方法

• 傳統的AJAX方法

• ES6提供的promise

#

promise.then( null, function( reason ){
    /* rejection */} );// 等价于promise.catch( function( reason ){
    /* rejection */} );

• ES6提供的promise—使用Fetch實作HTTP的請求

fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=getnews&type=" + this.props.type + "&count=" + this.props.count, myFetchOptions).then(response => response.json()).then(json => this.setState({news: json}));

4、元件的複用及驗證

#4.1 Props驗證

• 法1：const types = {userid: React.PropTypes.number.isRequired};  BodyIndex.propTypes = types;

• 
  

• ##法2：BodyIndex.propTypes = { userid: React.PropTypes.number.isRequired };

• 註：propTypes在v15.5版本之後需要安裝環境才能使用：npm install prop-types –save

#如下 介紹：import PropTypes from 'prop-types';
#使用BodyIndex.propTypes = { userid: PropTypes.number.isRequired };
• 4.2 預設的Props值

• ##4.2 預設的Props值

##4.2 預設的Props值

• #定義：const defaultNum = {username: “預設名”};

• #使用：BodyIndex.defaultProps = defaultNum;（想看更多就到PHP中文網React參考手冊

  欄位中學習）

• 4.3 元件的重複使用—參數的使用

  <BodyChild {...this.props} sex={"XXX}/>

  5、元件的Refs—取得標籤

• #方法一：原始的取得標籤方式：var myButton = document.getElementById(“submitButton”); myButton.style.color = “red”;

• #方法二：對標籤設定ref屬性：2e944d829da6d3c264dc220ac08f905d

  ;##############################################################################################'方法二的取得以及設定：this.refs.submitButton .style.color = “red”;#############Refs是存取元件內部DOM節點的唯一可靠方法;########################################################################### ######程式碼結束時，Refs會自動銷毀掉原來對子元件的參考；#############不要在render或render之前對Refs進行呼叫；###### #######不要濫用Refs。 ############6、獨立元件之間共享操作Mixins#############作用：不同元件之間公用功能，共享程式碼；##### #######專案安裝mixin：###npm install –save react-mixin@2###############匯入外掛：###import ReactMixin from 'react- mixin';###############新共用檔案－存放大量的公用函數或屬性；############哪裡需要使用就在那個元件###import MixinLog from './mixin.js';#######

• 把共享物件集合MixinLog，賦值給目前的元件原型：ReactMixin(BodyIndex.prototype, MixinLog);

• #對應不同的需求進行函數調用即可，如：MixinLog.log()。

• 特點：和頁面有類似的生命週期，呼叫幾次就執行了幾次。

7、 總結

本文主要是React的狀態屬性使用以及元件驗證、復用作出簡要介紹，大家可以下載軟體，下載完畢之後，透過指令面板定位到目前資料夾，之後執行npm install安裝所有環境，安裝完畢後，執行webpack –watch，專案即可運作。

這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。

以上是React屬性有哪些？關於react屬性、事件與共享的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！