时间戳

首页 > 解决方案 > 如何根据 redux 数据在通用 Header 组件中添加类

reactjs - 如何根据 redux 数据在通用 Header 组件中添加类

问题描述

在我的 react JS 应用程序中，我在标题组件中添加了一个通知图标。我创建了一个单独的组件，我在其中进行 api 调用以获取数据并显示它。如果有一些通知警报，我在这里想要实现的是更改 Header 组件中图标的颜色。我的 Header 组件-

import React from "react";
import { connect } from "react-redux";
import {
  setPoiData,
  getNotification,
  updateNotification
} from "../../actions/action";
import { Link } from "react-router-dom";
const axios = require("axios");

    class Notification extends React.Component {
      render() {
        const data = this.props.getNotificationStatus;
        const highlightBellIcon = Object.keys((data.length === 0))



          return (
              <div className="notification-parent">

                <Link to="/notification-details">
                  <span className={"glyphicon glyphicon-bell " + (!highlightBellIcon ? 'classA' : 'classB')} />
                </Link>
              </div>
            );
          }
        }
        const mapStateToProps = state => ({
          getNotificationStatus: state.root.getNotificationStatus
        });

        export default connect (mapStateToProps)(Notification)

这里，getNotificationStatus 是 Redux 中保存值的状态。

通知详细信息组件-

import React from "react";
import { connect } from "react-redux";
import {
  getNotification
} from "../../actions/action";
import { Spinner } from "../Spinner";
import { setTimeout } from "timers";
import NotificationTile from "../NotificationTile/NotificationTile";

const axios = require("axios");
class NotificationDetails extends React.Component {

  componentDidMount = () => {
    this.intervalId = setInterval(() => this.handleNotification(), 2000);
    setTimeout(
      () =>
        this.setState({
          loading: false
        }),
      10000
    );
  };

  componentWillUnmount = () => {
    clearInterval(this.intervalId);
  };
  handleNotification = () => {
    let postData = {
       //inputParams
    }
    //call to action
    this.props.dispatch(getNotification(postData));
  };

  getNotificationDetails = data => {
    const payloadData =
      data.payLoad &&
      data.payLoad.map(item => {
        console.log(this);
        return <NotificationTile {...item} history={this.props.history} />;
      });
    //console.log(payloadData);
    return payloadData;
    console.log("InitialState" + payloadData);
  };
  render() {
    const { loading } = this.state;
    const data = this.props.getNotificationStatus;
    return (
      <div className="notificationContainer container">
        <div className="notification-alert">
          {!loading ? (
            this.getNotificationDetails(data)
          ) : (
            <h1>
              Waiting for notifications..
              <Spinner />
            </h1>
          )}
        </div>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  getNotificationStatus: state.root.getNotificationStatus
});

export default connect(mapStateToProps)(NotificationDetails);

我面临的问题始终是 classB 被添加，因为 api 调用发生在单击铃铛图标时。所以当我第一次登陆页面时，除非我点击铃铛图标，否则不会发生 api 调用。我的代码绝对可以正常工作，只是我需要根据在作为兄弟组件的 NotificationDetail Comp 中收到的响应将类添加到我的 Notification 组件（这是一个全局组件）中。我哪里出错了有什么建议吗？

标签： reactjsreduxreact-redux

解决方案

notification-details是一个单独的组件，它获取数据并将其添加到存储中， <Link to="/notification-details">并且加载该组件，在这种情况下，您的存储最初不会有数据，直到您单击铃铛图标，这是正确的行为。

解决方案：

请在你的组件树中上一层，我的意思是去一个优于 Notification 的组件（它的 Container 组件），并在那里加载通知细节（你可以使用任何创建生命周期钩子），还有一个标志（isNotificationLoaded 之类的东西，它检查state.root.getNotificationStatus 填充数据的位置，并仅在其为真后加载通知面板。

就像是

render() {
 const data = this.props.getNotificationStatus;
 const noticationPanel = data.length > 0 ? <Notification/> : null;

 return({noticationPanel});
}

这将确保仅在有数据时加载，在此之前您可以显示一些活动指示器。

希望这有助于解决您的问题。

推荐阅读