reactjs - 如何隐藏特定路由的页眉和页脚

Question

我有一个OrderPrintReceiptScreen, 在加载此屏幕时，我希望页眉和页脚不显示在屏幕上。之后我想用window.print();这种方式可以实现干净的PDF收据。但是由于页眉和页脚，它们使它非常密集，我不确定如何在加载 this 时将其删除OrderPrintReceiptScreen。

这是App的布局

function App() {
  return (
    <Router>
      <Header />
      <main className="py-1">
        <Container>
          //.....
          <Route path="/order-receipt/:id" component={OrderPrintReceiptScreen} />
          //.....
        </Container>
      </main>
      <Footer />
    </Router>
  );
}

export default App;

OrderPrintReceiptScreen.js

import React, { useEffect } from "react";
import { Button, Row, Col, ListGroup } from "react-bootstrap";
import { Page, Text, View, Document, StyleSheet } from "@react-pdf/renderer";
import { LinkContainer } from "react-router-bootstrap";

import { useDispatch, useSelector } from "react-redux";

import Message from "../components/Message";
import Loader from "../components/Loader";
import {
  getOrderDetails,
  // payOrder,
} from "../actions/orderActions";

import {
  ORDER_PAY_RESET,
  ORDER_DELIVER_RESET,
} from "../constants/orderConstants";

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
    backgroundColor: "#E4E4E4",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});
function OrderPrintReceiptScreen({ match, history }) {
  const orderId = match.params.id;
  const dispatch = useDispatch();

  const orderDetails = useSelector((state) => state.orderDetails);
  const { order, error, loading } = orderDetails;

  const orderPay = useSelector((state) => state.orderPay);
  const { loading: loadingPay, success: successPay } = orderPay;

  const orderDeliver = useSelector((state) => state.orderDeliver);
  const { loading: loadingDeliver, success: successDeliver } = orderDeliver;

  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;

  if (!loading && !error) {
    order.itemsPrice = order.orderItems
      .reduce((acc, item) => acc + item.price * item.qty, 0)
      .toFixed(2);
  }

  useEffect(() => {
    if (!userInfo) {
      history.push("/login");
    }

    if (
      !order ||
      successPay ||
      order._id !== Number(orderId) ||
      successDeliver
    ) {
      dispatch({ type: ORDER_PAY_RESET });
      dispatch({ type: ORDER_DELIVER_RESET });

      dispatch(getOrderDetails(orderId));
    }
  }, [dispatch, order, orderId, successPay, successDeliver]);

  const printReceipt = (e) => {
    e.preventDefault();
    window.print();
  };

  return loading ? (
    <Loader />
  ) : error ? (
    <Message variant="danger">{error}</Message>
  ) : (
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
      <Row>
        <Col md={10}>
          <ListGroup variant="flush">
            <ListGroup.Item>
              <LinkContainer to={`/order-receipt/${order._id}`}>
                <Button
                  variant="outline-success"
                  className="mx-4 my-4 btn-lg"
                  fluid
                  onClick={printReceipt}
                >
                  Download Receipt
                </Button>
              </LinkContainer>
            </ListGroup.Item>

            <ListGroup.Item>Order ID : {order._id}</ListGroup.Item>
            <ListGroup.Item>
              Created On : {order.createdAt.substring(0, 10)},{" "}
              {order.createdAt.substring(11, 19)}
            </ListGroup.Item>
            <ListGroup.Item>
              Order Items:
              {order.orderItems.length === 0 ? (
                <Message variant="info">Order is empty</Message>
              ) : (
                <ListGroup flush>
                  {order.orderItems.map((item, index) => (
                    <ListGroup.Item key={index}>
                      <Row>
                        <Col>{item.name}</Col>
                      </Row>
                    </ListGroup.Item>
                  ))}
                </ListGroup>
              )}
            </ListGroup.Item>

            <ListGroup variant="flush">
              <ListGroup.Item>Name : {order.user.name}</ListGroup.Item>
              <ListGroup.Item>
                Phone Number : {order.shippingAddress.phoneNumber}
              </ListGroup.Item>
              <ListGroup.Item>
                Shipping Address : {order.shippingAddress.address},{" "}
                {order.shippingAddress.city}
                {"  "}
                {order.shippingAddress.postalCode},{"  "}
                {order.shippingAddress.country}
              </ListGroup.Item>

              {order.isPaid ? (
                <Message variant="light">
                  Payment Status : Paid On {order.paidAt.substring(0, 10)},{" "}
                  {order.paidAt.substring(11, 19)}
                </Message>
              ) : (
                <Message variant="warning">Not Paid</Message>
              )}
              <ListGroup variant="flush">
                <ListGroup.Item>Payment Summary : </ListGroup.Item>

                <ListGroup.Item>
                  <Row>
                    <Col>Items Price :</Col>
                    <Col>PKR {order.itemsPrice}</Col>
                  </Row>
                </ListGroup.Item>

                <ListGroup.Item>
                  <Row>
                    <Col>Shipping Price :</Col>
                    <Col>PKR {order.shippingPrice}</Col>
                  </Row>
                </ListGroup.Item>

                <ListGroup.Item>
                  <Row>
                    <Col>Tax Amount :</Col>
                    <Col>PKR {order.taxPrice}</Col>
                  </Row>
                </ListGroup.Item>

                <ListGroup.Item>
                  <Row>
                    <Col>Total Payable :</Col>
                    <Col> PKR {order.totalPrice}</Col>
                  </Row>
                </ListGroup.Item>
                <ListGroup.Item>
                  <Row>
                    <Col>Total Paid :</Col>
                    <Col> PKR {order.totalPricePaid}</Col>
                  </Row>
                </ListGroup.Item>
                <ListGroup.Item>
                  <Row>
                    <Col>Remaining Amount:</Col>
                    <Col>
                      {" "}
                      PKR {Number(order.totalPrice) - order.totalPricePaid}
                    </Col>
                  </Row>
                </ListGroup.Item>
              </ListGroup>

              {order.isDelivered ? (
                <Message variant="light">
                  Delivery Status : Delivered on{" "}
                  {order.deliveredAt.substring(0, 10)},{" "}
                  {order.deliveredAt.substring(11, 19)}
                </Message>
              ) : (
                <Message variant="warning">Not Delivered</Message>
              )}
            </ListGroup>
          </ListGroup>
        </Col>

        {/* <Col md={4}>
          
        </Col> */}
      </Row>
    </Page>
  );
}

export default OrderPrintReceiptScreen;

标签： reactjs

Answer 1

您需要创建一个组件，就像布局内的布局一样，您可以管理条件页眉和页脚，就像这个例子一样。

从 App 文件中删除页眉页脚。

看看我希望它有帮助

const OrderPrintReceiptScreen= (props) => {
  return (
    <Layouts
      showFooter={false}
      showHeader={false}
    >
      <Childeren {...props} />
    </Layouts>
  );
};

const Layouts= ({showFooter,showHeader,children}) =>{
   return (
           {showHeader && <Header/>}
           {children}
           {showFooter && <Footer/>}
    )
}

...........