React 固定数据表做出响应答案

【问题标题】：React fixed data table make responsiveReact 固定数据表做出响应
【发布时间】：2017-12-09 06:25:47
【问题描述】：

我在 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 列。我怎样才能做到这一点？

【问题讨论】：

width: 100% 表示 div 占据了它自己的父容器宽度的 100%。 width: auto 将导致 div 拉伸/收缩以适应相对定位的孩子。但是，我认为这在您的情况下并不重要，您已经在子元素上设置了宽度和高度属性，并且我假设这些最终是在子元素上设置 CSS 宽度和高度，子元素的尺寸是不灵活的，并且无论屏幕尺寸如何都不会改变。您是否考虑过使用 CSS flex-box 来设置组件的样式以使其灵活？

标签： reactjs fixed-data-table

【解决方案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;

【讨论】：