时间戳

首页 > 解决方案 > 当窗口大小缩放到更低或更高时如何删除属性

javascript - 当窗口大小缩放到更低或更高时如何删除属性

问题描述

我这里有一个来自 antd 的表格组件
<Table columns={columns} dataSource={data} scroll={{ x:1000 }} pagination={{pageSize: 4}} />

scroll={{ x:1000 }}基本上，当我使浏览器窗口变大时，我想删除比1200px. 我如何在 React 中实现这一点？

预订功能()

function booking() {

    return (

        <div className="booking"> 
            <Navbar bg="" variant="dark" id="mainHeader">
                <Nav className="mr-auto">
                    <img
                        src={logo}
                        width="110"
                        height="50"
                        className="d-inline-block align-top ml-4 mt-3 mb-2"
                        alt="logo"
                    />
                </Nav>
                <Nav.Link a href="/" className="ml-sm-4 text-dark">Home</Nav.Link>
                <Nav.Link a href="/bookings" className=" text-dark">Bookings</Nav.Link>
                <Nav.Link a href="/signout" className="mr-sm-4 text-dark">Sign Out</Nav.Link>
            </Navbar>

            {/* My Booking Table */}
            <header className="App-header text-dark">
                    <Card border="light" className="bookingCard" id="bookingCard" >
                        <h1 className="mt-4 ml-4" id="cardTitle">Upcoming Bookings</h1>
                        <Card.Body>
                            <Table columns={columns} dataSource={data} {...!!this.state.scroll && { scroll: { x: 1000 }}} pagination={{ pageSize: 4 }} />
                        </Card.Body>
                    </Card>
            </header>
        </div>
    );
}

我想改变那里的桌子。

标签： javascriptreactjsantd

解决方案

您可以添加一个在调整窗口大小时触发的事件。小示例代码：

import React from "react";
import "./styles.css";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      resized: window.innerWidth < 1200
    };
    this.onResize = this.onResize.bind(this);
  }


  onResize() {
    if (window.innerWidth < 1200) {
      this.setState({ resized: true });
    } else {
      this.setState({ resized: false });
    }
  }

  componentDidMount() {
    window.addEventListener("resize", this.onResize);
  }
}

在回报声明中：

<Table columns={columns} dataSource={data} scroll={{x: this.state.resized ?  1000 : 0}} pagination={{ pageSize: 4 }} />

推荐阅读