Question

我正在尝试展示＆＃39; edit-btn＆＃39;仅当用户登录时。在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>
    );
  }

}

Answer 1

您可以有条件地渲染组件，即使它们为空。

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/

在ReactJS中显示基于身份验证状态的元素

1 个答案: