美文网首页
一般高阶组件

一般高阶组件

作者: 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