Как удалить свойство, когда размер окна уменьшен или уменьшен

Question

У меня есть компонент таблицы здесь из 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>
    );
}

Я хотел изменить Таблицу там.

Answer 1

Вы можете добавить событие, которое запускается при изменении размера окна. Небольшой пример кода:

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 }} />