关于react.js:React高阶组件

41次阅读

共计 2353 个字符,预计需要花费 6 分钟才能阅读完成。

** 裁减组件。
创立一个函数裁减之后返回另一个函数 **
import React, {Component} from 'react'
 function bala(props){
 return(
 <div>
 {props.age} - {props.name}
 </div>
 )
 }

 function moreStage(Component){

 const moreComponent = props =>{return <Component {...props} name="jack"/>

 }

 return moreComponent

 }

  

export default moreStage(bala)
App.js 中应用
import React from 'react';

  

import './App.css';

import Hoc from './Hoc'

function App() {

 return (

 <div className="App">

 <Hoc age="12"/>

 </div>

 );

}

  

export default App;
链式调用
import React, {Component} from 'react'

  

 function bala(props){

 return(

 <div>

 {props.age} - {props.name}

 </div>

 )

 }

 function moreStage(Component){

 const moreComponent = props =>{return <Component {...props} name="jack"/>

 }

 return moreComponent

 }

 function withlog(Component){console.log(Component.name+'增强的')

 return props =>{return <Component {...props} />

 }

 }

  

export default moreStage(withlog(moreStage(withlog(bala))))
装璜器写法
npm i @babel/plugin-proposal-decorators -D

在 config-overrides.js 中增加

const {override,fixBabelImports,addDecoratorsLegacy} = require('customize-cra')

// override 返回一个函数   该函数返回对象作为 webpack 的配置对象

module.exports = override(

 fixBabelImports("import",{

 libraryName:'antd',

 libraryDirectory:'es',

 style:'css'

 }),
 addDecoratorsLegacy())
import React, {Component} from 'react'

function withlog(Component){console.log(Component.name+'增强的')

 return props =>{return <Component {...props} />

 }

}

function moreStage(Component){

 const moreComponent = props=>{return <Component {...props} name="jack"/>

 }

 return moreComponent

 }

 @withlog

 @moreStage

 @withlog

 class bala extends Component{render(){ 

 return(

 <div>

 {this.props.age} - {this.props.name}

 </div>

 )

 }

 }

  

// export default moreStage(withlog(moreStage(withlog(bala))))

export default bala
组件复合
import React, {Component} from 'react'

  

function Dialog(props){

 let color = props.color||'yellow'

 return (<div style={{border:`1px solid ${color}`}}>

 {/* children 是固定的名称 相当于 slot, 匿名插槽 */}

 {props.children}

 {props.foo('子组件传过来的')}

 <div>

 {/* 具名插槽 */}

 {props.footer}

 </div>

 </div>

 )

}

function WelcomeDialog(){let footer = <button onClick={()=>alert('...')}> 确认 </button>

 return (

 // 传递任意非法表达式

 <Dialog color="lightBlue" footer={footer} foo={(c)=><p>{c}</p>}>

 <p>React 牛逼 </p>

 </Dialog>

 )

}

export default function Composition(){return <WelcomeDialog>}

简易版的 redux
import React, {Component} from 'react'
const Context = React.createContext()
const store = {token:'kkk'}
export default class ContextText extends Component {render() {
        return (<Context.Provider value={store}>
                <div>
                <Context.Consumer>
                    {store=> <p>{store.token}</p>}
                </Context.Consumer>
                </div>
            </Context.Provider>
            
        )
    }
}

正文完
 0