reactjs - 如何根据渲染的内容组件使我的ant design Header name动态化

问题描述

我正在使用 ant design 开发一个项目，在该项目中我创建了一个单独的标题和内容组件。

这是我的标题组件。

import React from "react";
import { Layout, Avatar, Row, Col, Popover, Button, Badge } from "antd";
import { withRouter } from "react-router-dom";
import { BellIcon, LeftArrowIcon } from "../../assets/svg/icons";
import { PoweroffOutlined } from "@ant-design/icons";
import { useDispatch } from "react-redux";
import "./Header.css";
import { logout } from "../../actions/userActions";
const { Header } = Layout;

const GoBack = () => {
  return window.history.back();
};

const CustomHeader = withRouter((props) => {
  const dispatch = useDispatch();
  const { location } = props;
  let title = "";
  /*Header Dynamic Titles*/

  if (location.pathname === "/dashboard/home") {
    title = "Home";
  } else if (location.pathname === "/dashboard/clients") {
    title = "Clients";
  } else if (location.pathname === "/dashboard/inventory") {
    title = "Inventory";
  } else if (location.pathname === "/dashboard/marketing") {
    title = "Marketing";
  } else if (location.pathname === "/dashboard/clients/appointment/new") {
    title = "New Appointment";
  } else if (location.pathname === "/dashboard/checkout") {
    title = "Checkout";
  } else if (location.pathname === "/dashboard/clients") {
    title = "Clients Profile";
  }
  return (
    <Header
      style={{
        position: "sticky",
        top: 0,
        zIndex: 1,
        width: "100%",
        backgroundColor: "#fff",
        paddingLeft: "1.1rem",
      }}
    >
      <Row>
        <Col order={1}>
          {location.pathname === "/dashboard/appointment/new" ? (
            <strong style={{ fontSize: "1.1rem" }}>
              <LeftArrowIcon style={{ marginRight: "1rem" }} onClick={GoBack} />
              {title}
            </strong>
          ) : location.pathname === "/dashboard/checkout" ? (
            <strong style={{ fontSize: "1.1rem" }}>
              <LeftArrowIcon style={{ marginRight: "1rem" }} onClick={GoBack} />
              {title}
            </strong>
          ) : (
            <strong style={{ fontSize: "1.1rem" }}> {title}</strong>
          )}
        </Col>
        <Col
          style={{
            marginLeft: "auto",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
          xxl={1}
          xs={1}
          sm={1}
          md={1}
          lg={1}
          order={2}
        >
          <Badge count={0}>
            <BellIcon shape='square' style={{ marginLeft: "2.9vw" }} />
          </Badge>
        </Col>
        <Col xxl={4} xs={4} sm={4} md={4} lg={5} order={3}>
          <Popover content={avtarDetails(dispatch)}>
            <Avatar
              style={{
                color: "#fff",
                backgroundColor: "purple",
                marginLeft: "6vw",
              }}
            >
              G
            </Avatar>
          </Popover>
        </Col>
      </Row>
    </Header>
  );
});

export default CustomHeader;

目前，我正在查找路由器路径名并使标题动态化。例如，

if (location.pathname === "/dashboard/home") {
    title = "Home";
  } else if (location.pathname === "/dashboard/clients") {
    title = "Clients";
  } else if (location.pathname === "/dashboard/billing") {
    title = "Billing";
  } else if (location.pathname === "/dashboard/clients/appointment/new") {
    title = "New Appointment";
  } else if (location.pathname === "/dashboard/checkout") {
    title = "Checkout";
  } else if (location.pathname === "/dashboard/clients") {
    title = "Clients Profile";
  }

标题位置和图像标题名称通过位置

我想要新约会作为标题

我想在路径位置中将标题名称显示为新任命，如果位置 url 为

http://localhost:3000/dashboard/clients/appointment/new

但在生产中，我在位置 url 之间分配唯一 ID

例子：

http://localhost:3000/dashboard/clients/6000459f0682ed4590889067/appointment/new

这里 6000459f0682ed4590889067 是客户端的唯一 ID，对于每个单独的客户端，该 ID 都是唯一的。现在如何将标题动态名称设置为新约会。

请帮我解决这个问题。提前致谢。

标签： reactjsreact-routerreact-router-domantdant-design-pro

reactjs - 如何根据渲染的内容组件使我的ant design Header name动态化

问题描述

解决方案

推荐阅读