摘要:在中,數據是自頂向下流動的稱為單項數據流,從父組件傳遞到子組件。任何數據類型您還可以指定自定義類型檢查器。如果檢查失敗,它應該返回一個對象。不要或,因為這不會在內工作。檢查器有兩個參數,第一個參數是數組或對象本身,第二個是當前項的鍵。
在React中,數據是自頂向下流動的(稱為單項數據流),從父組件傳遞到子組件。因此組件是簡單且易于把握的,它們只需從父節點獲取props渲染即可。如果頂層組件的某個prop改變了,React會遞歸向下遍歷整個組件樹,從新渲染所有使用這個屬性的組件。
然而在React中出了props之外還有自己的狀態,這些狀態只能在組件內修改,那這個狀態就是state
props:就是properties的縮寫,你可以使用它把任意類型的數據傳遞給組件(通俗一點就是,可以當成方法傳遞的參數)
state:當前組件內部數據
可以在掛載組件的時候設置它的props
var data = { name : "劉宇", title : "標題" };
在組件內部調用的話就是使用 this.props
//Comment.js import React, { Component } from "react";、 import "./Comment.css"; class Comment extends Component { render() { return (propTypes{/**接受參數**/} {this.props.name} {/**接受子節點**/} {this.props.children}); } } export default Comment; //App.js class App extends Component { render() { return ({/**調用組件**/}); } } export default App; //index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import "./index.css"; ReactDOM.render(組件插入內容{/**子節點**/} , document.getElementById("root") );
propTypes用于規范props的類型與必須的狀態。如果組件定義了propTypes,那么在開發環境下,就會對組件的props值的類型作檢查,如果傳入的props不能與之匹配,React將實時在控制臺里報warning(警告);
static propTypes = { // 你可以定義一個js原始類型的prop,默認請情況下,這是都是可選的 optionalArray: React.PropTypes.array, optionalBool: React.PropTypes.bool, optionalFunc: React.PropTypes.func, optionalNumber: React.PropTypes.number, optionalObject: React.PropTypes.object, optionalString: React.PropTypes.string, optionalSymbol: React.PropTypes.symbol, // 任何可以渲染的東西:數字,字符串,元素或數組(或片段)。 optionalNode: React.PropTypes.node, // React元素 optionalElement: React.PropTypes.element, // 你也可以聲明prop是某個類的實例。 內部使用的是JS的instanceof運算符。 optionalMessage: React.PropTypes.instanceOf(Message), // 你可以通過將它作為枚舉來確保你的prop被限制到特定的值。 optionalEnum: React.PropTypes.oneOf(["News", "Photos"]), // 可以是許多類型之一的對象 optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]), // 某種類型的數組 optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), // 具有某種類型的屬性值的對象 optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), // 采取特定樣式的對象 optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }), // 你可以用`isRequired`來連接到上面的任何一個類型,以確保如果沒有提供props的話會顯示一個警告。 requiredFunc: React.PropTypes.func.isRequired, // 任何數據類型 requiredAny: React.PropTypes.any.isRequired, // 您還可以指定自定義類型檢查器。 如果檢查失敗,它應該返回一個Error對象。 不要`console.warn`或throw,因為這不會在`oneOfType`內工作。 customProp: function(props, propName, componentName) { if (!/matchme/.test(props[propName])) { return new Error( "Invalid prop `" + propName + "` supplied to" + " `" + componentName + "`. Validation failed." ); } }, // 您還可以為`arrayOf`和`objectOf`提供自定義類型檢查器。 如果檢查失敗,它應該返回一個Error對象。 // 檢查器將為數組或對象中的每個鍵調用驗證函數。 // 檢查器有兩個參數,第一個參數是數組或對象本身,第二個是當前項的鍵。 customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if (!/matchme/.test(propValue[key])) { return new Error( "Invalid prop `" + propFullName + "` supplied to" + " `" + componentName + "`. Validation failed." ); } }) }; //以上是ES6的寫法,如果使用的是createClass MyComponent.propTypes = { //同上 }要求只能是單個子元素
class MyComponent extends React.Component { render() { // 只能包含一個子元素,否則會給出警告 const children = this.props.children; return (getDefaultProps和defaultProps{children}); } } MyComponent.propTypes = { children: React.PropTypes.element.isRequired }
可以為組件添加getDefaultProps來設置屬性的默認值。
//es6寫法 class Comment extends Component { //設置默認props值 static defaultProps = { name:"默認值" } render() { return ({/**接受參數**/} {this.props.name} {/**接受子節點**/} {this.props.children}); } } var Comment = React.createClass( { //設置默認props值 getDefaultProps : { name:"默認值" }, render : function(){ return ({/**接受參數**/} {this.props.name} {/**接受子節點**/} {this.props.children}); } })
state注意:props可以訪問不可以修改,如果需要修改,請使用state
state是組件內部的屬性。組件本身是一個狀態機,他可以在constructor中通過this.state直接定義他的值,然后根據這些值來渲染不同的UI,當state的值發生改變時,可以通過this.setState方法讓組件再次調用render方法,來渲染新的UI.
var Comment = React.createClass( { //設置state值 getInitialState : { num:0 }, addNum : function(){ var num = this.state.num++; this.setState({ num:num }) }, render : function(){ return (); } }) //es6寫法 class Comment extends Component { constructor(props) { super(props); this.state = { num : 0 }; this.addNum = this.addNum.bind(this) } addNum() { var num = this.state.num++; this.setState({ num:num }) } render() { return (); } }
上一篇:react開發教程(三)組件的構建
下一篇:react開發教程(五)生命周期
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82610.html
摘要:在團隊開發中,組件化帶來的優勢是便于協同開發,由于代碼中的耦合度降低了,每個模塊都可以分拆為一個組件,例如異步請求組件,路由組件,各個視圖組件。 什么是組件 組件化就好像我們的電腦裝機一樣,一個電腦由顯示器、主板、內存、顯卡、硬盤,鍵盤,鼠標...。 組件化開發有如下的好處:降低整個系統的耦合度,在保持接口不變的情況下,我們可以替換不同的組件快速完成需求。例如輸入框,可以替換為日歷、時...
摘要:相關鏈接詳細教程,從無到有搭建腳手架一詳細教程,從無到有搭建腳手架二詳細教程,從無到有搭建腳手架三管理打包后目錄結構打包結構如下修改配置通過相對目錄對資源命名前加上目錄名,效果后面的步驟在這里需要安裝一個大型的包,以為例安裝為第三 相關鏈接 webpack4詳細教程,從無到有搭建react腳手架(一) webpack4詳細教程,從無到有搭建react腳手架(二) webpack4詳細...
閱讀 2665·2021-11-11 16:54
閱讀 3657·2021-08-16 10:46
閱讀 3441·2019-08-30 14:18
閱讀 3034·2019-08-30 14:01
閱讀 2723·2019-08-29 14:15
閱讀 2007·2019-08-29 11:31
閱讀 3083·2019-08-29 11:05
閱讀 2583·2019-08-26 11:54