一、函數式組件的 props

function Demo (props) { // 由于函數式組件沒有自己的 this 必須指定 propsreturn (<div><ul><li>{props.name}</li><li>{props.age}</li></ul></div>) }// 抽離掛到組件上面的 props 變量 const person = {name: 'mary',age: 18} ReactDOM.render(<Demo {...person} />, document.getElementById('root')); // {...person} --> 解構

二、類式組件的 props

class Demo extends React.Component {render() {const {name, age} = this.props; // 解構賦值的方式獲取 props 上面的值return (<div><ul><li>{name}</li><li>{age}</li></ul></div>)} }// 提取組件里面的 props 變量 const person = {name: 'mary', age: 18}; ReactDOM.render(<Demo {...person} />, document.getElementById('root'));

三、對 props 屬性值類型進行限制

引入 props-types.js

<script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>

限制 props 屬性值的類型

Demo.propTypes = {name: PropTypes.string, // name : stringage: PropTypes.number, // name : numbersex: PropTypes.string // name : string } // 如果傳入 props 屬性的值類型不對應，就會報錯

為 props 屬性的值指定默認值

Demo.defaultProps = {sex: 'male', // sex 不傳值 默認為 male }

總結

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

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