-
{...this.props} 的定義
{...this.props} 是props所提供的语法糖,可以将父组件的所有属性复制给子组件,子組件可獲取父組件中所有參數等。
如下代碼片段:
/*查询列表*/
class SearchBookList extends Component{
render(){
const { bookList, onFetchBookIntro } = this.props;//此處獲取父組件的props
return (
<ul>
{/*<BookListItem item={{ imgUrl:'http://image.cmfu.com/books/3330580/3330580.jpg', hTitle:"Hello World", subTitle: "第二章"}} />
<BookListItem item={{ imgUrl:'http://image.cmfu.com/books/3330580/3330580.jpg', hTitle:"Hello World", subTitle: "第二章"}} />*/}
{bookList.map((book,i) =>
<BookListItem key={i} {...this.props} item={{
bookId:book._id,
imgUrl:book.cover,
hTitle:book.title,
subTitle: book.lastChapter,
retentionRatio:book.retentionRatio,
shortIntro:book.shortIntro,
author: book.author,
onFetchBookIntro: onFetchBookIntro
}}
/>
)}
</ul>
)
}
}
//調用的組件
<div className="bookListContainer">
{len > 0? <SearchBookList {...this.props} />
: <RecommendAndHistory {...this.props} />}
</div>
-
this.props.history
- this.props.history.push(pathname,state):可實現頁面跳轉。pathname:写跳转界面的路径;state:要传过去的数据。
- this.props.history.goBack():返回上一頁。
- this.props.history.go(-2):返回前兩個頁面。
-
Redux中的dispatch
dispatch触发了一个修改state的操作,且只能通过dispatch触发修改。它的参数是一个action;
action表示当前dispatch(操作)的类型和载荷(数据)(payload),比方说我要修改系统主题色,那这个action可能就这么定义了{type: 'CHANGE_THEME', color: 'red'},其中type是约定俗成的参数,且必填。
另:Redux是将react的state
进行全局管理,也就是管理整个项目的state。
-
HTML <img> alt 属性
alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。
假设由于一些原因(比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器)用户无法查看图像,alt 属性可以为图像提供替代的信息。
如下例: