context 子组件使用不显示


  • 0

    按照提供的方式写之后会报错

    import React, { Component } from 'react'
    import PropTypes from 'prop-types'
    
    class Index extends Component {
        static childContextTypes = {
            themeColor: PropTypes.string
        }
    
        constructor(props) {
            super(props);
            this.state = {
                themeColor: 'skyblue'
            }
        }
    
        getChildContext () {
            return  {
                themeColor: this.state.themeColor
            }
        }
        
        render () {
            return (
                <div>
                    <Header />
                    <Footer />
                </div>
            )
        }
    }
    
    class Header extends Component {
        render () {
            return (
                <header>
                    <h2>开启世界大门</h2>
                    <Title />
                </header>
            )
        }
    }
    
    class Footer extends Component {
        render () {
            return (
                <footer>
                    <h3>底部出来</h3>
                    <Content />
                </footer>
            )
        }
    }
    
    class Title extends Component {
        static childContextTypes = {
            themeColor: PropTypes.string
        }
    
    
    
        render () {
            return (
                <div>
                    <h1 style= { {color: this.context.themeColor } }>我是标题</h1>
                </div>
            )
        }
    }
    
    class Content extends Component {
        render () {
            return (
                <div>
                    底部的世界
                </div>
            )
        }
    }
    
    export default Index
    

    0_1531907306013_2018-07-18_174755.png

    针对问题添加了 getChildContext

    class Title extends Component {
        static childContextTypes = {
            themeColor: PropTypes.string
        }
    //========================================
     //当前这步是不是有问题,
        getChildContext  () {
           return {
               color: this.context.themeColor 
           }
        }
    // ===============================================
        render () {
            return (
                <div>
                    <h1 style= { {color: this.context.themeColor } }>我是标题</h1>
                </div>
            )
        }
    }
    

    添加了 虽然不报错了,但是也不变色

    结论

    • 个人一直觉不觉是不是版本更新了,因为用的是最新的react,不知是不是这样

  • 0

    最新版本的react的context的使用方法已经变了, 不再使用this.context了,而是使用provider 和consumer,我在github上给作者提意见了,详见如下链接
    https://github.com/huzidaha/react-naive-book/issues/24


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待