Props
組件的優勢就是將項目中需要展示的內容劃分成小的UI模塊,方便複用,降低代碼冗餘。組件被封裝時,某些數據是不確定的,只有在組件被調用時確定,也就是說,在調用組件時,可以向被調用的組件傳參,組件可以用props獲取這些數據並渲染。
示例一(用函數封裝的組件):
// App.js
import React, { Component } from 'react';
const handsome = ['萊昂納多','德普','奧蘭多','湯姆克里斯'];
const belle = ['艾瑪','安吉麗娜','蓋爾加朵','克里斯汀'];
// Message組件,渲染列表,具體數據不定,用props接受被調用時的參數,並進行渲染
function Message(props) {
return (<div className="message">
{
props.list.map(function(item, i) {
return <p key={i}>{item}</p>;
})
}
</div>);
}
class App extends Component {
render() {
return (
<div className="App">
{/* 在調用組件時確定Message組件需要渲染的數據,並以參數的形式傳遞 */}
<Message list={handsome} />
<Message list={belle} />
</div>
);
}
}
export default App;
示例二(用class類封裝的組件):
React爲類封裝的組件提供了一個公有屬性props,用來接受組件被調用時,外部通過屬性傳入的參數。
封裝Message組件
// src/components/message/message.js
import React from 'react'
class Message extends React.Component {
render() {
// 從公有屬性props中,解構list參數,並對其進行渲染
const {list} = this.props;
return (<div className="message">
{
list.map(function(item, i) {
return <p key={i}>{item}</p>;
})
}
</div>);
}
}
export default Message
在某個父級組件中調用Message組件,並向其傳參
// App.js
import React, { Component } from 'react';
import Message from './components/message/message'
const handsome = ['萊昂納多','德普','奧蘭多','湯姆克里斯'];
const belle = ['艾瑪','安吉麗娜','蓋爾加朵','克里斯汀'];
class App extends Component {
render() {
return (
<div className="App">
{/* 調用組件並向其傳參 */}
<Message list={handsome} />
<Message list={belle} />
</div>
);
}
}
export default App;
注:如果調用時傳了多個參數,可以依次解構。
示例:
// App.js
...
class App extends Component {
render() {
return (
<div className="App">
{/* 調用組件並向其傳參 */}
<Message list={handsome} />
<Message list={belle} title={'pretty girl'} />
</div>
);
}
}
...
// src/components/message/message.js
import React from 'react'
class Message extends React.Component {
render() {
// 從公有屬性props中,解構list參數,並對其進行渲染
const {list, title} = this.props;
return (<div className="message">
<p>{title}</p>
{
list.map(function(item, i) {
return <p key={i}>{item}</p>;
})
}
</div>);
}
}
export default Message
注:props是隻讀的。
Props驗證
有時候我們要對props中的屬性做一些限制。React提供了prop-types庫,用來做props的數據類型檢查,以避免一些違規代碼造成的bug。
使用prop-types庫做props檢查:
- 安裝依賴包
npm install --save prop-types
-
在組件中使用prop-types
PropTypes 包含一整套驗證器,可用於確保你接收的數據是有效的。如果用PropTypes對某個數據進行類型限制,那當傳入一些無效數據時,控制檯會做出錯誤提示。
示例:
// src/components/message/message.js
...
// 導入PropTypes
import PropTypes from 'prop-types';
...
// 使用PropTypes對組件props中的title參數做類型限制
Message.propTypes = {
title: PropTypes.string
};
// App.js
// 父元素中條用Message時,向title鍵傳一個無效值
...
<Message title={1} />
...
在封裝Message時,用PropTypes限制了title的類型是字符串,但是在App父組件中調用時傳入的參數類型是number,控制檯會做出錯誤提示:
除了上面的示例之外,prop-types庫還提供多種驗證方式,文檔鏈接在本文最後。