理解：
1.每個組件對象都會有props(properties的簡寫)屬性
2.組件標簽的所有屬性都保存在props中

作用：
1.通過標簽屬性從組件向外組件內傳遞變化的數據
2.注意：組件內部不要修改props數據(props是只讀的)

操作：
1.內部讀取某個屬性值

this.props.name

2.對props中的屬性值進行類型限制和必要性限制
使用prop-types庫進行限制（需要引入prop-types庫）

Person.propTypes = {name:PropTypes.string.isRequired, //限制name必傳，且為字符串age:PropTypes.number//限制age為數值
}

3.擴展屬性：將對象的所有屬性通過props傳遞

<div id='test'></div>
<div id='test1'></div>
<script type="text/babel">//1.創建組件class Person extends React.Component{render(){console.log(this)//讀取狀態const {name,age,sex} = this.propsreturn <ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age}</li></ul>}}//2.渲染組件到頁面//普通傳值ReactDOM.render(<Person name="掌聲" age="20" sex="男"/>,document.getElementById('test'))//多個參數傳值const p = {name="lisi" age=18 sex="女"}console.log(...p)//報錯，展開運算符不能展開對象ReactDOM.render(<Person {...p}/>,document.getElementById('test1'))//展開運算符展開對象，只適用于標簽屬性的傳遞
</script>

4.默認屬性值

Person.defaultProps = {name:'tom',age:20
}

5.函數式組件使用props（只有props能使用），不需要寫render

<div id='test'></div>
function Person(props){const {name,age,sex} = propsreturn (<ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age}</li></ul>)
}
//對標簽屬性進行類型，必要性的限制
Person.propTypes = {name:PropTypes.string.isRequired,//限制name必傳，且為字符串sex:PropTypes.string,//限制sex為字符串age:PropTypes.number//限制age為數值
}
//指定默認標簽屬性值
Person.defaultProps = {name:'tom',age:20
}
//渲染組件到頁面
ReactDOM.render(<Person name="lili"/>,document.getElementById('test'))

props基本使用:

<div id='test'></div>
<script type="text/babel">//1.創建組件class Person extends React.Component{render(){console.log(this)//讀取狀態const {name,age,sex} = this.propsreturn <ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age}</li></ul>}}//對標簽屬性進行類型，必要性的限制Person.propTypes = {name:PropTypes.string.isRequired,//限制name必傳，且為字符串sex:PropTypes.string,//限制sex為字符串age:PropTypes.number，//限制age為數值speak:PropTypes.func//限制speak為函數}//指定默認標簽屬性值Person.defaultProps = {name:'tom',age:20}function speak(){console.log("講話了.....")}//2.渲染組件到頁面ReactDOM.render(<Person name="掌聲" speak={speak}/>,document.getElementById('test'))

props簡寫(將限制和默認值移到類中)：關鍵字：static

<div id='test'></div>
<script type="text/babel">//1.創建組件class Person extends React.Component{//構造器與props的關系:構造器是否接受 props,是否傳遞給 super//取決于：是否希望在構造函數中通過 this 訪問 propsconstructor(props){//構造器可省略不寫console.log(props)//在React.Component子類實現構造函數時，在其他語句之前調用，否則this.props在構造函數中可能會出現未定義的bugsuper(props)//只要有構造器，必寫super	console.log('constructor'，this.props)//this.props為undefined}//對標簽屬性進行類型，必要性的限制static propTypes = {name:PropTypes.string.isRequired,//限制name必傳，且為字符串sex:PropTypes.string,//限制sex為字符串age:PropTypes.number，//限制age為數值}//指定默認標簽屬性值static defaultProps = {name:'tom',age:20}render(){console.log(this)//讀取狀態const {name,age,sex} = this.propsreturn <ul><li>姓名：{name}</li><li>性別：{sex}</li><li>年齡：{age}</li></ul>}}//2.渲染組件到頁面ReactDOM.render(<Person name="掌聲"/>,document.getElementById('test'))

總結

以上是生活随笔為你收集整理的props的理解和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。