reactjs - React 固定数据表做出响应

Question

我在 div 中有一个表格，如下所示：

<div className="second-row-container">

    <Table
        rowsCount={this.state.myTableData.length}
        rowHeight={50}
        headerHeight={50}
        width={9*150}
        height={(this.state.myTableData.length+1)*50}>
        <Column
            header={<Cell>Delivery</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].delivery}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Category</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].age}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Language</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].language}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Target market</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].market}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Valid from</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].valid_from}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Valid till</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].valid_till}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell>Visibility</Cell>}
            cell={props => (
                <Cell {...props}>
                    {this.state.myTableData[props.rowIndex].visibility}
                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell></Cell>}
            cell={props => (
                <Cell {...props}>

                </Cell>
            )}
            width={150}
        />
        <Column
            header={<Cell></Cell>}
            cell={props => (
                <Cell {...props}>

                </Cell>
            )}
            width={150}
        />
    </Table>

</div>

在CSS中我有：

.second-row-container{
  height: 50vh;
  background-color: lightgray;
  padding: 0.5%;
  width: 100%;
}

我认为通过将父宽度设置为 100%，当我缩小屏幕时，表格总是会缩小，但事实并非如此。

如何使表格适合父 div 和小屏幕我希望隐藏第 3、4、5 和 6 列。我怎样才能做到这一点？

Answer 1

您可以通过附加resize事件来实现window，请参见下面的代码

var React = require('react');
var ReactDOM = require('react-dom');
var {Table} = require('fixed-data-table');
var _ = require('lodash');

var FittedTable = React.createClass({
    getInitialState() {
        return {
            tableWidth  : 400,
            tableHeight : 400
        };
    },

    componentDidMount() {
        var win = window;
        if (win.addEventListener) {
            win.addEventListener('resize', _.throttle(this._update, 250), false);
        } else if (win.attachEvent) {
            win.attachEvent('onresize', _.throttle(this._update, 250));
        } else {
            win.onresize = this._update;
        }
        this._update();
    },

    componentWillReceiveProps(props) {
        this._update();
    },

    componentWillUnmount() {
        var win = window;
        if(win.removeEventListener) {
            win.removeEventListener('resize', _.throttle(this._update, 250), false);
        } else if(win.removeEvent) {
            win.removeEvent('onresize', _.throttle(this._update, 250), false);
        } else {
            win.onresize = null;
        }
    },

    _update() {
        if (this.isMounted()) {
            var node = ReactDOM.findDOMNode(this);

            this.setState({
                tableWidth  : node.clientWidth,
                tableHeight : node.clientHeight
            });
        }
    },

    render() {
        return (
            <div className="fitted-wrapper">
                <Table {...this.props} width={this.state.tableWidth} height={this.state.tableHeight}>
                    {this.props.children}
                </Table>
            </div>
        );
    },
});

module.exports = FittedTable;