Не удается получить мой дочерний компонент для рендеринга при смене реквизита

Question

Я очень новичок в React, но стараюсь изо всех сил построить что-то значимое.Но я застрял с этой проблемой на несколько дней.Вот мой вопрос:

У меня есть этот компонент приложения:

function App() {
return (

    <Fragment>
        <HeadMenu />
        <TitleBanner componentTitle={this.props.location.pathname} />
        <Home />
    </Fragment>
);}
export default withRouter(App);

И это компонент TitleBanner

class TitleBanner extends React.Component {

constructor(props) {
    super(props);
    this.componentTitle= props.componentTitle
    };
}

render() {

    return (
        <Grid container alignContent={'center'} >
            <Grid item xs={11}>
                <h2>
                    {this.componentTitle}
                </h2>
            </Grid>
        </Grid>
    );
};} 
 export default TitleBanner;

Я хочу, чтобы компонент компонента TitleBanner обновлял реквизиты компонента компонента TitleBannerв зависимости от текущего местоположения, НО при каждом изменении местоположения заголовок не обновляется, пока я не обновлю страницу вручную.Мне удалось обновить его с помощью Redux (хотя, возможно, я сделал это неправильно), но похоже, что он обновляет всю страницу, пока я хочу изменить только один заголовок.

1. Каковы простые решения для обновления заголовка TitleBanner без рендеринга других модулей?

Спасибо за ваши ответы.

Answer 1

В вашем коде есть пара неправильных вещей

Первое: В вашем компоненте приложения вы используете this.props.location.pathname, но, поскольку он является функциональным компонентом, вы должны использовать аргументы props fromкак

function App(props) {

    return (

        <Fragment>
            <HeadMenu />
            <TitleBanner componentTitle={props.location.pathname} />
            <Home />
        </Fragment>
    );

}
export default withRouter(App);

Секунда: В вашем компоненте TitleBanner вы назначаете опору componentTitle переменной класса в конструкторе, которая не будет переназначаться при изменении реквизита.Поскольку вы напрямую используете опору без каких-либо изменений, рекомендуется использовать ее непосредственно из самого реквизита

class TitleBanner extends React.Component {

    render() {

        return (
            <Grid container alignContent={'center'} >
                <Grid item xs={11}>
                    <h2>
                        {props.componentTitle}
                    </h2>
                </Grid>
            </Grid>
        );
    };

} 
export default TitleBanner;