Question

您好我正在尝试在我的页面上实现一个auth逻辑。我遇到的问题，在更新我的页面状态后，它不会删除经过身份验证的内容。如何清除元素？

我正在尝试使用三元运算符，它确实有效。但是，当用户登录或注销时，它不会更新。它只渲染一次，然后就在那里。

header.js

import React, { Component } from 'react';

import LoginHeader from './auth_logic/login_header';
import PublicHeader from './auth_logic/public_header';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {isAuth: false};
  }

  render() {
    if (Meteor.userId) {
      this.setState({isAuth: !this.state.isAuth});
    }
    else {
      this.setState({isAuth: !this.state.isAuth});
    }

    return (
      <div>
        {this.state.isAuth ? <PublicHeader /> : <LoginHeader />}
      </div>
    );
  }
}

这是我的LoginHeader，当用户通过身份验证时，它将显示其他信息和导航身份验证链接。

auth_logic / login_header.js

import React, { Component } from 'react';

import Accounts from '../accounts';

export default class LoginHeader extends Component {
  render() {
    return (
      <div className="nav navbar-default">
        <a className="navbar-brand">Nick Reviews</a>

        <ul className="nav navbar-nav">
          <li>
            <a href="#">
              To Watch
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <a href="#">
              Reviews
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <Accounts />
          </li>
          <li><a href="#"> Create new item </a></li>
        </ul>
      </div>
    );
  }
}

它与login_header.js文件完全相同，但信息较少。

auth_logic / public_header.js

import React, { Component } from 'react';

import Accounts from '../accounts';

export default class PublicHeader extends Component {
  render() {
    return (
      <div className="nav navbar-default">
        <a className="navbar-brand">Nick Reviews</a>

        <ul className="nav navbar-nav">
          <li>
            <a href="#">
              To Watch
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <a href="#">
              Reviews
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <Accounts />
          </li>
        </ul>
      </div>
    );
  }
}

Answer 1

假设您的userId是上面的道具，请使用componentWillReceiveProps()反应生命周期方法来更新您的状态取决于您的道具。有关详细信息，请参阅此链接 - https://reactjs.org/docs/react-component.html

Answer 2

Header组件不应该在内部保持isAuth状态，它应该来自容器组件，如Home / About（Router Page）...根据prop改变渲染条件。

在React中更新状态后清除DOM元素

2 个答案: