反应从非静态列调整固定数据表的大小

Posted 2023-02-21

【中文标题】反应从非静态列调整固定数据表的大小

【英文标题】：react resize fixed-data-table from nonstatic columns

【发布时间】：2017-07-21 13:14:38

【问题描述】：

这可能是一种反模式，但我使用的是固定数据表来显示具有变化列的表。 resize 函数根据状态变化调整每列的宽度。但是，我需要从收到的道具中构建状态或列。我无法从渲染函数更新状态。有没有更好的方法来解决这个问题？到目前为止，我最好的解决方案是将状态宽度生成为 100，但这是暂时的。

constructor(props) 
    super(props);var columnWidths =
            recordid: 40,

        ;
    for(var i=0; i<100;i++) 
        columnWidths[i]=200
    

    this.state = 
        columnWidths
    ; 
    this._onColumnResizeEndCallback = this._onColumnResizeEndCallback.bind(this);

_onColumnResizeEndCallback(newColumnWidth, columnKey) 
    this.setState(( columnWidths ) => (
        columnWidths: 
            ...columnWidths,
            [columnKey]: newColumnWidth,
        
    ));
    console.log(newColumnWidth + " " + columnKey)

【参考方案1】：

所以显然我可以使用 componentWillUpdate() 从道具更新我的反应状态。 componentWillReceiveProps() 不会更新我从 api 调用中提取的道具。但是，我需要在将道具拉入渲染之前更新状态。此几乎解决方案在预先填写时有效，但在页面刷新时无效：

componentWillUpdate() 
    var columnWidths = 
        recordid: 40,
    ;
    Object.keys(this.props.fields).map(key => 
        columnWidths[this.props.fields[key].Order] = 200;

    )
    this.state = 
        columnWidths
    ;

我必须在第一次渲染时添加 || 或符号，然后在加载道具后自动创建这些符号

width=columnWidths[field.Order]||200

【参考方案2】：

我不确定我是否理解您的问题，但是您可以在构造函数（props）函数中初始化您的状态，然后在 componentWillMount 或 componentDidMount 以及 componentWillReceiveProps(newProps) 中使用基于 this.props 的 setState。

所以看来你需要在生命周期方法 componentWillMount 或 componnentDidMount 中调用 setState。

【讨论】：

componentWillMount 和 componnentDidMount 有问题，因为我正在等待 api 调用以获取列的名称，并且它们并不总是以相同的顺序完成 REST 调用。更新效果最好。