Почему мой дочерний компонент не получает новую пропу, введенную в this.props.children?

Question

Я использую React-Redux для создания веб-приложения. В родительском компоненте («Макет») я разделяю страницу на два столбца A и B.

Столбец A является компонентом реакции («NavMenu»), который также содержит заголовок содержимого столбца B. Столбец B - это место, где отображается основной компонент, и у него есть собственный заголовок.

Что я хочу сделать, так это отправить этот заголовок из компонента B в его родственный компонент A. До сих пор я узнал, что мне нужно отправить эти данные в родительский компонент (Layout), а затем оттуда отправить их A через функцию обратного вызова. Эта функция является опорой, которую я добавил всем дочерним элементам в this.props.children в компоненте Layout.

В компоненте Layout содержимое в B является одним из дочерних компонентов в this.props.children.

Вот мой код:

Layout.js

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreators } from '../store/Layout';
import { Col, Grid, Row } from 'react-bootstrap';
import NavMenu from './NavMenu'; // Component A

class Layout extends React.Component {

    myCallback = titleFromChild => {
        this.props.changeTitle(titleFromChild);
    }

    render() {
        const childrenWithCallback = React.Children.map(this.props.children, (child) => {
            return React.cloneElement(child, { titleCallback: this.myCallback });
        });
        return (
            this.props.isLoading ?
                <p className='clearfix text-center'><span>Loading...</span></p>
                :
                <Grid fluid>
                    <Row>
                        <Col sm={3}>
                            <NavMenu title={this.props.title} />
                        </Col>
                        <Col sm={9}>
                            {childrenWithCallback}
                            {console.log(childrenWithCallback)}
                            // Console.log here shows that all children in this.props.children have the new prop
                        </Col>
                    </Row>
                </Grid>
        );
    }}
    export default connect(
        state => state.layout,
        dispatch => bindActionCreators(actionCreators, dispatch)
        )(Layout);

Я добавил функцию this.myCallback в this.props.children, как в этом уроке .

LayoutStore.js

const changeTitleType = 'CHANGE_TITLE';
const initialState = {
    title: "Child title",
    isLoading: true
};

export const actionCreators = {
    changeTitle: title => ({ type: changeTitleType, title })
}

export const reducer = (state, action) => {
    state = state || initialState;

    if (action.type === changeTitleType) {
        return {
            ...state,
            title: action.title
        };
    }

    return state;
};

Я проверил этот аналогичный вопрос и этот другой аналогичный вопрос , и я понимаю, как он должен работать, но моя проблема идет немного дальше: дочерний компонент не получить новую инъекцию.

ComponentB.js

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreators } from '../store/ExpeditionCommands';

class ComponentB extends React.Component {

    componentWillMount() {
        this.props.titleCallback(this.props.title);
        console.log(this)
        //This is where I am not receiving the prop (titleCallback) I sent from the parent component    
    }

    render() {
        return (
            <div>Hi there</div>
        );
    }
}

export default connect(
    state => state.componentStoreB,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(ComponentB);

Почему мой дочерний компонент не получает новую пропитку, введенную в this.props.children? Нужно ли мне проходить через мой магазин редуксов?