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

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