реагировать на изменение размера таблицы с фиксированными данными из нестатических столбцов

Это может быть анти-шаблон, но я использую таблицу фиксированных данных для отображения таблиц с изменяющимися столбцами. Функция изменения размера изменяет ширину каждого столбца в зависимости от изменения состояния. Однако мне нужно построить состояние или столбцы из полученных реквизитов. Я не могу обновить состояние с помощью функции рендеринга. Есть ли лучший способ сделать это? Моим лучшим решением до сих пор было сгенерировать ширину состояния до 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)
}

reactjs state react-proptypes fixed-data-table
person lastlink    schedule 02.03.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Итак, очевидно, я могу использовать componentWillUpdate () для обновления моего состояния реакции из реквизита. ThecomponentWillReceiveProps () не будет обновлять мои реквизиты, извлеченные из вызова 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}
person lastlink    schedule 02.03.2017

arrow_upward
0
arrow_downward

Я не уверен, что понимаю ваш вопрос, но вы можете инициализировать свое состояние в функции конструктора (props), а затем использовать setState на основе this.props в componentWillMount или componentDidMount, а также в componentWillReceiveProps (newProps).

Итак, похоже, вам нужно вызвать setState в методе lifecylce componentWillMount или componentDidMount.

person Fay    schedule 11.08.2017
comment
У componentWillMount и componentDidMount были проблемы, потому что я ждал от вызова API, чтобы получить имена столбцов, и они не всегда завершали вызовы REST в одном и том же порядке. Обновление сработало лучше всего. - person lastlink; 12.08.2017