1. 程式人生 > >react中prop-types的使用

react中prop-types的使用

react number 即使 同學 使用 color http imp item

什麽是prop-types?prop代表父組件傳遞過來的值,types代表類型。簡單來說就是用來校驗父組件傳遞過來值的類型

import PropTypes from ‘prop-types‘;
TodoItem.propTypes = {
    test: PropTypes.string.isRequired,   //加上isRequired以後,即使父組件沒傳遞值也會拋出警告
}
import PropTypes from ‘prop-types‘;
TodoItem.propTypes = {
    test: PropTypes.arrayOf(PropTypes.string, PropTypes.number)   
//可以設置多個類型 }

那麽如何解決父組件沒傳遞值也會拋出的警告呢?可以使用react裏的defaultProps來設置默認的props值

TodoItem.defaultProps = {
  test: ‘hello word‘  
}

還有想學習更多proptypes的同學請關註react文檔https://reactjs.org/docs/typechecking-with-proptypes.html

大家學會了嗎?

react中prop-types的使用