Question

我正在使用带有Material-UI的ReactJS，这对我来说都很新用。

我有一个AppBar组件，用作主菜单/导航栏。我想AppBar组件的标题反映我所在的页面。因此，如果我按下一个将用户路由到/ login的按钮，我还想将AppBar组件的标题更改为＆＃34; Login＆＃34;。我已经完成了这个，但似乎有一些副作用，所以我怀疑它是正确的做法。

目前，我的AppBar组件如下所示：

render() {
    let MenuOptionsNotLogged = ({}) => (
        <div>
            <FlatButton
                label="Log In"
                containerElement={<Link to="/login" />}
                secondary
                linkButton
                onClick={this.switchToLogin}
            />
        </div>
    );
    return (
        <div>
            <MuiThemeProvider muiTheme={muiTheme}>
                <div className="headerDiv">
                    <AppBar
                        className="appBar"
                        showMenuIconButton={this.state.appBarIcon}
                        title={this.state.appBarTitle}
                        iconElementRight={<MenuOptionsNotLogged />}
                        iconElementLeft={<IconButton><BackIcon /></IconButton>}
                    />
                </div>
            </MuiThemeProvider>
        </div>
    );

在我的构造函数中，我设置了AppBar的默认状态（标题和图标）：

constructor(props, context) {
    super(props, context);
    this.switchToLogin = this.switchToLogin.bind(this);

    this.state = {
        appBarTitle: 'Home',
        appBarIcon: false
    };
}

然后我有一个功能，当用户导航到登录页面时，它会更改标题和图标：

switchToLogin() {
    this.setState({ appBarTitle: 'Log in' });
    this.setState({ appBarIcon: true });
}

问题

此功能可以使用，但如果用户刷新或点击浏览器上的后退按钮，则会出现问题。

E.g。用户导航到/登录，标题更改为＆＃34;登录＆＃34;，用户刷新浏览器。然后用户将进入/登录，但标题将重置为＆＃34; Home＆＃34;。

后退按钮的问题相同。用户可以导航到登录，按回，标题将保持为＆＃34;登录＆＃34;而不是＆＃34; Home＆＃34;

Answer 1

我看到你有一个Link组件。我的回答是假设您使用react-router。

问题是您的appBarTitle状态未正确映射到当前路由。此外，当用户刷新浏览器时，组件的state会重置。

如果您未使用reat-router 3.0，则可以通过this.context.location.pathname访问当前路线。您需要了解如何使用context here。

然后你可以编写一个辅助函数来将路径名映射到你想要显示的文本：'/login' -> 'Login', '/' -> 'Home'。

然后title的{{1}}只能是辅助函数返回的值。你不再需要在该州保留它。

只是添加，与你的问题无关，Reactjs是一种声明式的编程风格，这意味着不鼓励'switchToLogin然后显示登录标题'。告诉组件要渲染的内容而不是如何渲染。

刷新或按下按钮

1 个答案: