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庫還提供多種驗證方式，文檔鏈接在本文最後。