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

Question

您好，我正在尝试对页面执行身份验证逻辑。 我遇到的问题是，更新页面状态后，它没有删除经过身份验证的内容。 如何清除元素？

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

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

标头组件不应在内部保持isAuth状态，它应来自容器组件，例如Home / About（Router Page）...根据prop更改呈现条件。