реагировать: добраться до родителя компонента или передать данные от родителя к потомку

Question

Подскажите пожалуйста, как можно по этой схеме

render()
{
    return (
<Parent>
    <Child1>
    <Child2>
</Parent>
    );
}

на стороне компонентов Parent и Child получают данные, которые будут сгенерированы в методе render () или в конструкторе (доступ к данным)

Понятно, что одним из способов является перевод на props, но если без него?

Например, установлено состояние, в конструкторе Parent получено это состояние родительского элемента и установлено то же состояние, в конструкторе Child получено состояние Parent и его состояние задавать. В результате некоторый параметр передается по дереву.

Но для реализации этого вам необходимо каким-то образом получить доступ к родительскому элементу компонента.

Например:

более красивый вариант (и я не знаю, как его реализовать - этот вариант был бы более предпочтительным)

this.state = {
    mydata: 123;
};

class Parent extends Component
{
    constructor()
    {
        super();

        this.state = {
            mydata: this.getOwner().state.mydata; // = 123
        };
    }
}

class Child extends Component
{
    constructor()
    {
        super();

        this.state = {
            mydata: this.getOwner().state.mydata; // = 123
        };
    }
}

менее красивый вариант (я знаю, как его реализовать)

render()
{
    return (
<Parent mydata = "123">
    <Child1 mydata = "123">
    <Child2 mydata = "123">
</Parent>
    );
}

class Parent extends Component
{
    constructor(props)
    {
        super();

        this.state = {
            mydata: props.mydata
        };
    }
}

class Child extends Component
{
    constructor(props)
    {
        super();

        this.state = {
            mydata: props.mydata
        };
    }
}

Answer 1

вы можете достичь желаемого результата, используя что-то под названием Context следующим образом:

 //outside of your class component
    const MyContext = React.CreateContext();
//inside your class component
        state = {mydata: "123"}

        render()
        {
            return (
        <MyContext value={this.state}>
        <Parent>
            <Child1>
            <Child2>
        </Parent>
        </MyContext>
            );
        } 

теперь внутри любого из компонентов дерева: ParentChild1 и Child2 вы можете достичь значения общего состояния, сказав this.context.mydata

узнать больше на https://reactjs.org/docs/context.html