一、子、父组件通信 props传递
this.props.callBack(param)
import Children from '..../Children'
class Parent extends Component {
parentFunc = (param) => {}
render() {
return <Children callBack={this.parentFunc.bind(this)}/>
}
}
class Parent extends Component {
parentFunc = (param) => {}
render() {
return <Children tilte="handsome"/>
}
}
// 子组件
let title = this.props.title
React 中组件间通信的几种方式
二、withRouter处理props没有路由情况 react-router
import { withRouter } from "react-router"
export default withRouter()
三、日期选择插件 react-mobile-datepicker
import DatePicker from 'react-mobile-datepicker'
this.state = {
time: new Date(),
isDatePickerOpen: false
}
handleDatePicker = () => {}) }
handleDatePickerCancel = () => {}
handleDatePickerSelect = (time) => {}
<DatePicker
value={time}
isOpen={isDatePickerOpen}
onSelect={(time)=>this.handleDatePickerSelect(time)}
onCancel={()=>this.handleDatePickerCancel()} />
react-mobile-datepicker
四、H5上拉加载、下拉刷新组件 dropload-gh-pages
dropload-gh-pages GitHub地址
五、ListView setState不渲染 antd-mobile
import { PullToRefresh,ListView } from 'antd-mobile'
this.page = 1
this.dataSource = []
this.hasMore = true
this.state = {
dataSourceLen:0,
masterChooseLen:0,
dataSource:new ListView.DataSource({rowHasChanged: (row1, row2) => true,}),
refreshing: true,
isLoading: true,
useBodyScroll: true,
height:document.documentElement.clientHeight
}
componentDidMount(){
let _this = this
_this.teacherList(callBackList)
function callBackList(data){
_this.dataSource = data.list
_this.dataSource.forEach((val,key)=>{
if (!val.status) _this.dataSource[key].status = 0
})
_this.setState({
dataSourceLen:data.list.length,
refreshing: false,
isLoading: false,
height: hei,
dataSource: _this.state.dataSource.cloneWithRows(_this.dataSource)
})
}
}
onRefresh = () => {
let _this = this
_this.page = 1
_this.dataSource = []
_this.setState({refreshing: true, isLoading: true})
_this.teacherList(callBackList)
function callBackList(data){
setTimeout(()=>{
_this.dataSource = data.list
_this.setState({
dataSourceLen:_this.dataSource.length,
refreshing: false,
isLoading: false,
dataSource: _this.state.dataSource.cloneWithRows(_this.dataSource)
})
},1000)
}
}
onEndReached = () => {
let _this = this
if (!_this.hasMore) return false
_this.page++
_this.setState({ isLoading: true })
_this.teacherList(callBackList)
function callBackList(data){
_this.dataSource = _this.dataSource.concat(data.list)
setTimeout(()=>{
_this.setState({
dataSourceLen:_this.dataSource.length,
isLoading: false,
dataSource: _this.state.dataSource.cloneWithRows(_this.dataSource)
})
},1000)
}
}
teacherList = (callBack) => {
...
if (code===200){
if (data.list.length===0){
_this.hasMore = false
}else{
_this.hasMore = true
}
callBack(data)
}else{
Toast.info(info,2,null,false)
_this.setState({refreshing: false,isLoading: false})
}
}
const {
useBodyScroll,
dataSource,
isLoading,
refreshing,
height
} = this.state
<ListView
key={useBodyScroll ? '0' : '1'}
ref={el => this.lv = el}
dataSource={dataSource}
renderHeader={() =>()}
renderFooter={() => ()}
renderRow={row}
useBodyScroll={useBodyScroll}
style={useBodyScroll ? {} : {height: height}}
pullToRefresh={
<PullToRefresh
refreshing={refreshing}
onRefresh={this.onRefresh}/>
}
onEndReached={this.onEndReached}
/>
六、React与原生交互
if (device==='ios') window.webkit.messageHandlers.pushControllerWithURL.postMessage(url)
if (device==='android') window.jumpToDetails.jumpToDetails(url)
constructor(props){
this.initialProgress = this.initialProgress.bind(this)
}
componentDidMount(){
window.initialProgress = _this.initialProgress
}
initialProgress() { this.props.callBack(0) }
七、React获取Image图片高度
<img src={...} onLoad={e => {this.imgLoad(e)}} alt="..."/>
imgLoad = (e)=> { let height = e.target.height }
八、JSON字符串作为 URI组件进行编码encodeURIComponent/decodeURIComponent
目的:为了在url间传递大量json数据时,数据传递不报错
let dataSub = encodeURIComponent(JSON.stringify(this.props.collection))
let data = JSON.parse(decodeURIComponent(data))