Então, eu tenho vários ReactComponent. Inicialmente, eu estava pensando que haverá um tipo de componente pai (vamos chamar isso de GrandPa) com seu próprio estado e ele passará algumas informações sobre seu estado para outro componente (chamado pai). Da mesma forma, Parent passa um pouco para Child e child para GrandChild. Então, temos a hierarquia:

GrandPa -> Pai -> Filho -> GrandChild

No entanto, percebi rapidamente que quando mudo o estado do vovô com o métodothis.setState(prevState => (<new state based on prevState>)), as alterações não entram em cascata no canal. Outro problema que percebi é a passagem de mudanças no canal também. Não encontrei uma boa maneira de fazer isso. (Antes, eu fazia algo super esboçado vinculando alguns eventos a um componente no DOM e tendo uma variável pública acessível a partir de todo o ReactComponent. Então, quando alguém aciona um evento específico, eu tentava acionar eventos que atualizavam o respectivos componentes ... Para encurtar a história, isso criou muitos problemas e foi feio.)

Então, eu tenho o código de exemplo abaixo, onde tentei fazer isso apenas com um pai e filho. É um exemplo fictício, mas é apenas para aprender como fazer isso. O pai, chamadoReactRandom tem um estado{name: <name>} e tem um método que altera esse nome para uma sequência aleatória. QuandoReactRandom renderiza, renderiza esse nome de outro componenteReactRandomNested que basicamente imprime o nome passado por seus próprios adereços. Aqui, eu criei um método dentro doReactRandomNested que processa explicitamente as alterações (que NÃO QUERO BTW, estou pensando que há uma maneira de cascatear as atualizações pelo canal sem ter que fazer isso explicitamente porque seria desagradável rapidamente, pois temos mais de 2 níveis aninhados). No entanto, mesmo isso não funciona. Ele tem um atraso de 1 etapa e renderiza a atualização anterior no timestep atual.

De qualquer forma, aqui está o código que tenho atualmente:

class RandomReactNested extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: props.name};
    }

    handleChange() {
        let self = this;
        self.setState({name: self.props.name});
    }

    render() {
        let self = this;
        return React.createElement("span", {
            onClick: () => self.handleChange.call(this)
        }, self.state.name);
    }
}

class RandomReact extends React.Component {
    constructor (props){
        super(props);
        this.state = {name: props.name};
        this.changeName.bind(this);
    }

    changeName () {
        let random_word_length = Math.round(Math.random()*20),
            index_count = 0,
            new_name = "",
            alphabet = "abcdefghijklmnopqrstuvwxyz";
        for (index_count; index_count <= random_word_length; index_count += 1) {
            new_name += `${alphabet[Math.round(Math.random()*random_word_length)]}`;
        }
        console.log(new_name);

        this.setState(prevState => ({
            name: new_name
        }));
    }

    render() {
        let self = this;
        return React.createElement("div", {
            key: 2,
            onClick: () => (this.changeName.call(self))
        },
            React.createElement(RandomReactNested, {
                name: self.state.name
            }));
    }
}

A propósito, eu sou bastante novo no React e estou tentando aprender como usar isso efetivamente. Também vi isso no site do ReactJS no final da página (https://reactjs.org/docs/composition-vs-inheritance.html), o que parece aconselhar contra isso (mas não tenho muita certeza?):

"E quanto à herança? No Facebook, usamos o React em milhares de componentes e não encontramos nenhum caso de uso em que recomendamos a criação de hierarquias de herança de componentes. Adereços e composição oferecem toda a flexibilidade necessária para personalizar a aparência de um componente e comportamento de maneira explícita e segura. Lembre-se de que os componentes podem aceitar objetos arbitrários, incluindo valores primitivos, elementos React ou funções. Se você deseja reutilizar a funcionalidade que não seja da interface do usuário entre os componentes, sugerimos extraí-la em um módulo JavaScript separado. componentes podem importá-lo e usar essa função, objeto ou classe, sem estendê-lo. "