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组件的componentTitle道具能够在每次更改位置时根据当前位置进行更新，但除非手动刷新页面，否则标题不会更新。我已经使用Redux成功更新了它（虽然我可能做错了），但是看起来它刷新了整个页面，而我只想更改一个标题。

在不渲染其他模块的情况下更新TitleBanner标题的简单解决方案有哪些？

感谢您的回答。

Answer 1

您的代码中有几处错误

首先：在您的App组件中，您正在使用this.props.location.pathname，但由于它是一个功能组件，因此您应该使用自变量中的props之类的

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;

无法让我的子组件在道具变更时重新渲染

1 个答案: