react學習-react父組件給子組件傳值與設置傳值類型以及是否必傳參數

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: '默認值'
};

這樣在頁面中顯示內容就是設置的默認內容