React `context` always empty object

Question

Я пытаюсь установить контекст в своем приложении React, но почему-то я не могу получить context от детей. Это родительский класс:

import React from 'react' 
import MenuBar from './MenuBar.js' 

export default class App extends React.Component { 

    static childContextTypes = { 
    prop: React.PropTypes.bool 
    }; 

    getChildContext(){ 
    return { 
     prop: true 
    } 
    } 

    render() { 
    return (
     <div> 
     <MenuBar /> 
     </div> 
    ) 
    } 

} 

А вот мой дети класс:

import React, { Component } from 'react'; 

export default class MenuBar extends Component { 

    constructor(props, context){ 
    super(props,context) 
    console.log(this.context) 
    console.log(context) 
    } 

    render() { 
    console.log(this.context) 
    return (
     <div>MenuBar</div> 
    ); 
    } 
} 

Все console.log «s возвращает пустой объект, что я делаю неправильно?

Answer 1

Контекст - это расширенная и экспериментальная функция. API, вероятно, изменится в будущих выпусках. source

Если вам необходимо передать информацию ребенку, пройдите по ссылке prop. Как следующий

класс App

<MenuBar myProp="hello"/> 

класса MenuBar

constructor(props, context){ 
    super(props,context) 
    console.log(this.props.myProp) //prints 'hello' 
    } 

Answer 2

Добро пожаловать на переполнение стека :)

Context используется в основном библиотеки авторов, например, React Router и Redux - две широко используемые библиотеки React - в настоящее время полагаются на контекст. Вот хорошие резюме написанных Дэн Абрамов (автор Redux): https://stackoverflow.com/a/36431583/4186037

недостающая часть в коде является следующим статической переменной, которая должна присутствовать на вашем ребенок компонента:

static contextTypes = { 
    prop: React.PropTypes.bool 
}; 

Вот демо-версия: http://codepen.io/PiotrBerebecki/pen/LRLgJP и ниже - полный код.

class App extends React.Component { 
    static childContextTypes = { 
    prop: React.PropTypes.bool 
    }; 

    getChildContext() { 
    return {prop: true}; 
    } 
    render() { 
    return <MenuBar/ >; 
    } 
} 


class MenuBar extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    console.log('in constructor', context.prop) // logs: true 
    } 

    static contextTypes = { 
    prop: React.PropTypes.bool 
    }; 

    render() { 
    console.log('in render', this.context.prop) // logs: true 
    return (
     <div>MenuBar</div> 
    ); 
    } 
} 


ReactDOM.render(
    <App />, 
    document.getElementById('app') 
); 

Для Реагировать v15.5 и выше, использование PropTypes вместо React.PropTypes и импортировать PropTypes так:

import PropTypes from 'prop-types'; 

См: https://reactjs.org/docs/typechecking-with-proptypes.html для получения дополнительной информации.