类似 vue 的 mixins

  • 定义withFetch.jsx 文件， 内部使用公共部分
  1. import React, {Component} from 'react';
  2. // 公共部分放在这里，  mixins
  3. const withFetch = (count) => (View) => {
  4.   return class extends Component {
  5.     constructor(){
  6.       super()
  7.       this.state= {
  8.         loading: true,
  9.         count: 0
  10.       }
  11.     }
  13.     componentDidMount(){
  14.       this.setState({
  15.         count: count
  16.       })
  17.       setTimeout(()=>{
  18.         this.setState({
  19.           loading:false
  20.         })
  21.       }, 5000)
  22.     }
  23.     render() {
  24.       if(this.state.loading) {
  25.         return <div>loading.......</div>
  26.       }else{
  27.         return <View count={this.state.count}></View>
  28.       }
  29.     }
  30.   }
  31. }
  33. export default withFetch
  • test.jsx
  1. import React from 'react';
  2. import withFetch from './withFetch'
  4. const Banner = withFetch(123)(props => {
  5.   return (
  6.     <div>
  7.       <p>
  8.         获取到数据：
  9.         {props.count}
  10.       </p>
  11.     </div>
  12.   )
  13. })
  15. export default Banner