一般高阶组件

2020-08-04  本文已影响0人  skoll
// 高阶组件中使用Context
import React from 'react' 

const ThemeContext =React.createContext('dark')

export function WithTheme(Component){
    return function ThemedComponent(props){
        return (
            <ThemeContext.Consumer>
                {theme=>
                    <Component {...props} theme={theme}></Component>
                }
            </ThemeContext.Consumer>
        )
    }
}

import {WithTheme} from "./contextHight"
import React from 'react'

function Button({theme, ...rest}) {
    return <button className={theme} {...rest} />;
  }
  
const ThemedButton = WithTheme(Button);

// 对这个组件进行高级包装
export default ThemedButton
上一篇 下一篇

猜你喜欢

热点阅读