react 父組件給子組件傳參時，父組件直接在引入的子組件內寫入要傳遞的引數即可
<HeaderComponent title={"傳遞的引數"}></HeaderComponent>
在子組件接收使用props
<div id="header"> {this.props.title} </div>
這樣就可以獲取到父組件內傳遞的引數，傳參的同時也可以限制傳參的型別，這里需要引入一個react的方法prop-types
import PropTypes from 'prop-types';
然后去設定型別，使用組件名點propTypes
class HeaderComponent extends Component { render() { return ( <div id="header"> {this.props.title} </div> ) } } HeaderComponent.propTypes = { //.propTypes是react規定的名稱,不可以修改 title: PropTypes.string //設定title的型別 };
react中規定的型別名稱如下
這樣如果傳遞的型別不是我們自己規定的型別的話，就會產生報錯
同時也可以設定這個值是否必須傳遞，使用isRequired這個屬性
title: PropTypes.string.isRequired
這樣就可以規定title這個值必須存在否則產生如下報錯
當然設定里這個引數必須傳遞的情況下，也可以選擇不進行傳值，這樣的話需要設定一個默認值就可以了defaultProps
//設定默認值--->存在默認值情況下必填引數可以不傳值，沒有默認值必須傳值 HeaderComponent.defaultProps = { title: '默認值' };
這樣在頁面中顯示內容就是設定的默認內容
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/170396.html
標籤：JavaScript
上一篇：let/const特性
下一篇：立即執行函式