Обновить Redux prop/state после div onclick

У меня есть таблица - давайте вызовите ее в таблице 1. При нажатии на строку в таблице 1 отображается другая таблица, позвольте ей позвонить этой таблице 2. В таблице 2 показаны данные, относящиеся к строке с щелчком в таблице 1. Иногда вертикальная прокрутка должна отображаться в таблице 2, а иногда и не - зависит от количества строк. Необходимо решить: происходит нежелательный переход границы, когда свиток не отображается:

. Идея для решения: " изменить margin-right" в соответствии с условиями, которые показывают, выходит ли прокрутка или нет. Сохраните результат этого условия в Redux prop: element.scrollHeight > element.clientHeight || element.scrollWidth >
element.clientWidth

Проблема:. Попытка обновить отображение/отсутствие отображения прокрутки в редукс-опоре из разных событий React, таких как componentDidMount, componentWillReceiveProps, CopmponentDidUpdate (состояние установки вызывает цикл infinte здесь) и из click.Tried, чтобы использовать forceUpdate() после настройки реквизита в Redux.

При console.log в консоль в хром (F12), единственный результат, который правильно коррелирует с дисплеем/без отображения полосы прокрутки приходит изнутри componentDidUpdate и оно не отражает в перевождь проп (isoverflown функция возвращает true, reducex this.props.scrollStatus и this.state.scrollStatus являются ложными). Также не нравится использование document.getElementById для div, который содержит строки, поскольку он прерывает манипуляции с dom изнутри реквизита и состояния, но пока не нашел другого решения.

Консоль F12 при отображении полосы прокрутки:

Консоль F12, когда не отображается полоса прокрутки:

Ответы

Ответ 1

Спасибо за ваш ответ. Однако он решил его по-разному, что не связано с жизненным циклом/событиями:

1) Вычислите высоту прокрутки: -множество высоты одной строки по количеству отображаемых элементов (arr.length, arr происходит от JSON)

2) установив максимальную высоту прокрутки в нужное значение

3), устанавливая максимальную высоту содержимого как расчетную высоту:

Результатом является свиток, который отображает все время с правильной высотой. Это позволило решить проблему с отступом.

	
<div style={{overflowY:'auto', marginRight: '18px',zIndex:'1000',borderBottom:'1px solid black',borderRight:'1px solid black', height: this.props.rowData[this.state.selected].rowItemsList.length * singleRowHeight + 'px', maxHeight:'100px' }}> 

<div style={{ width:'inherit', maxHeight:this.props.this.props.rowData[this.state.selected]‌.rowItemsList.length * singleRowHeight + 'px' }}>

Ответ 2

Давайте упростим это. Все, что вам нужно, - это отправить редуктор каждый раз, когда один клик внутри div. Пожалуйста, найдите полезный фрагмент кода, пожалуйста, просмотрите комментарии.

//import store from "./store/directory" - update this to ur store
let DOMObject = document.getElementById("id1"); //dom reference i did it based on ID its up to u to refer how u like it
//call back happens each time onclick event is triggered
DOMObject.onclick = ()=> { 
 /* store.dispatch(
{
type:"reducer to invoke",
data:"the data to update on click"
}
);
*/
//uncomment above and update to your requirement
console.log("clicked - Please update the dispatch event to you requirement"); 

}

#id1 {
 padding :100px 150px 100px 80px;
 background-color: lightblue;
}

<div id="id1">
DIV AREA - clcik
</div>