美文网首页
一般高阶组件

一般高阶组件

作者: skoll | 来源:发表于2020-08-04 20:43 被阅读0次
// 高阶组件中使用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

相关文章

网友评论

      本文标题:一般高阶组件

      本文链接:https://www.haomeiwen.com/subject/jocgrktx.html