javascript - 当窗口缩放到较小/较大尺寸时如何删除属性

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

使用resize事件监听器，类似这样的:

const threshold = 1200;

window.addEventListener('resize', () => {
    const addScroll = !this.state.addScroll;
    return window.innerWidth >= threshold ^ !addScroll && this.setState({ addScroll });
});

在render方法中:

<Table columns={columns}
       dataSource={data}
       {...!!this.state.addScroll && { scroll: { x: 1000 }}
       pagination={{ pageSize: 4 }} />

所以你的完整代码应该如下所示:

class Booking extends React.Component {
    constructor () {
        const widthThreshold = 1200;

        window.addEventListener('resize', () => {
            const addScroll = !this.state.addScroll;
            return window.innerWidth >= widthThreshold ^ !addScroll && this.setState({ addScroll });
        });
    }

    render = () =>
        <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>

            <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.addScroll && { scroll: { x: 1000 } }} pagination={{ pageSize: 4 }} />
                    </Card.Body>
                </Card>
            </header>
        </div>;
}