js項目實踐小知識點React篇（2）

1、子、父組件通訊 props傳遞

// 一、子組件傳遞父組件
    // 子組件
    this.props.callBack(param)
    // 父組件
    import Children from '..../Children'
    class Parent extends Component {
        // 父組件註冊方法
        parentFunc = (param) => {} // param爲子組件傳遞過來方法
        render() {
            return <Children callBack={this.parentFunc.bind(this)}/> } } 複製代碼

// 二、父組件傳遞子組件
    // 父組件
    class Parent extends Component {
        // 父組件註冊方法
        parentFunc = (param) => {} // param爲子組件傳遞過來方法
        render() {
            return <Children tilte="handsome"/> } } // 子組件 let title = this.props.title 複製代碼

React 中組件間通訊的幾種方式

2、withRouter處理props沒有路由狀況 react-router

import { withRouter } from "react-router"
    export default withRouter() // 包裹實例化類
複製代碼

3、日期選擇插件 react-mobile-datepicker

import DatePicker from 'react-mobile-datepicker'
    this.state = {
        time: new Date(),
        isDatePickerOpen: false
    }
    // datePicker
    handleDatePicker = () => {}) }
    handleDatePickerCancel = () => {}
    handleDatePickerSelect = (time) => {}
    
    <DatePicker
      value={time}
      isOpen={isDatePickerOpen}
      onSelect={(time)=>this.handleDatePickerSelect(time)}
      onCancel={()=>this.handleDatePickerCancel()} />
複製代碼

react-mobile-datepicker

4、H5上拉加載、下拉刷新組件 dropload-gh-pages

dropload-gh-pages GitHub地址

5、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) => row1 !== row2,}),
      dataSource:new ListView.DataSource({rowHasChanged: (row1, row2) => true,}),
      refreshing: true,
      isLoading: true,
      useBodyScroll: true,  // 上、下拉
      height:document.documentElement.clientHeight //listview
    }
    componentDidMount(){
        let _this = this
        _this.teacherList(callBackList)  // 獲取教師列表
          function callBackList(data){   // callBack
            _this.dataSource = data.list
            // 拼接status，判斷點擊狀態
            _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){     // callBack
      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){     // callBack
      // 拼接
      _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})
    }      
  }
  // render
    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}
  />
複製代碼

6、React與原生交互

// 一、React調原生
    if (device==='ios') window.webkit.messageHandlers.pushControllerWithURL.postMessage(url)
    if (device==='android') window.jumpToDetails.jumpToDetails(url)
    
    // 二、原生調React
    constructor(props){
        this.initialProgress = this.initialProgress.bind(this) // 初始化
    }
    componentDidMount(){
        window.initialProgress = _this.initialProgress  // 給原生實例化回調方法
    }
    initialProgress() { this.props.callBack(0) } // 原生調取方法
    // Tips:安卓訂閱方法時遇到問題，iOS對接很絲滑
複製代碼

7、React獲取Image圖片高度

<img src={...} onLoad={e => {this.imgLoad(e)}} alt="..."/>
複製代碼

imgLoad = (e)=> { let height = e.target.height }
複製代碼

8、JSON字符串做爲 URI組件進行編碼encodeURIComponent/decodeURIComponent

目的：爲了在url間傳遞大量json數據時，數據傳遞不報錯

let dataSub = encodeURIComponent(JSON.stringify(this.props.collection)) //string化+url編碼
    let data = JSON.parse(decodeURIComponent(data)) // url解碼+json化
複製代碼