在ReactJS中根据身份验证状态显示元素

Showing elements based on authentication status in ReactJS

本文关键字：状态 显示 元素 身份验证 ReactJS      更新时间：2023-09-26

我试图仅在用户登录时显示'edit-btn'。在ReactJS中实现这一点的最好方法是什么?如果没有登录，就呈现没有元素的组件，如果用户登录了，就呈现元素?如果有，实现这一目标的最佳方法是什么?我对ReactJS很陌生。

class LeftBlock extends React.Component {
  render() {
    return (
      <div className="left-block">
        {this.props.children}
        <a href="#" className="edit-btn"><i className="fa fa-pencil"></i></a>
        <br className="clear" />
      </div>
    );
  }
}

您可以有条件地呈现组件，即使它们是空的。

class LeftBlock extends React.Component {
    render() {
        var isAuth = false; // You'll need to figure out a way how to get this - From a store maybe or cookie?
        var button;
        if (isAuth){
            button = (<a href="#" className="edit-btn"><i className="fa fa-pencil"></i></a>);
        }
        return (
            <div className="left-block">
            {this.props.children}
            {button}
            <br className="clear" />
          </div>
        );
    }
}

在这种情况下，如果isAuth为false，则不会呈现任何东西来代替{button}。

在获取isAuth状态方面，我建议使用AuthenticationStore，这样您就可以从组件中获取身份验证信息。

如果您还不熟悉Flux架构，请检查它。https://facebook.github.io/flux/docs/overview.html

小提琴:https://jsfiddle.net/6yq1ctcp/1/

相关文章：