按div后更新Redux支柱/状态
我有一个表--让我们称它为表1。当单击表1中的一行时，另一个表正在显示，让我们将这一表称为表2。表2显示与表1中单击的行相关的数据。有时需要在表2中显示垂直滚动，有时不需要在行数上显示-depends。需要解决：，当卷轴没有显示时，会出现不需要的边框转换：。
。的解决方案的思想：“更改边距-右”，根据这些条件显示该条件的结果是退出还是not.Save到Redux ：element.scrollHeight > element.clientHeight维希element.scrollWidth >
element.clientWidth问题：试图将滚动的显示/非显示更新为redux支柱，这些事件来自不同的反应事件，如componentDidMount、componentWillReceiveProps、CopmponentDidUpdate (set state在这里导致无限循环)，以及在将道具设置为Redux之后单击event.Tried来使用forceUpdate()。
当console.log进入chrome (F12)中的控制台时，与滚动条的显示/非显示正确相关的唯一结果来自于componentDidUpdate内部，并且它不反映在redux支柱中(isoverflown函数返回true，redux this.props.scrollStatus和this.state.scrollStatus为false)。还不喜欢包含行的div使用document.getElementById，因为它从道具和状态中中断了对dom的操作，但目前还没有找到不同的解决方案。
当显示滚动条时，F12控制台：
当没有显示滚动条时，F12控制台：
。
其余代码如下：
1)行动：
export function setScrollStatus(scrollStatus) {
return {
type: 'SET_SCROLL_STATUS',
scrollStatus: scrollStatus
};
}
2)减速器：
export function scrollStatus(state = [], action) {
switch (action.type) {
case 'SET_SCROLL_STATUS':
return action.scrollStatus;
default:
return state;
}
}
3)Page.js (请点击图片查看代码)
import {setScrollStatus} from '../actions/relevantfilename';
function isOverflown(element) {
return element.scrollHeight > element.clientHeight ||element.scrollWidth > element.clientWidth;
}
class SportPage extends React.Component {
constructor(props) {
super(props);
this.state = initialState(props);
this.state = {
scrolled:false,
scrollStatus:false};
componentDidUpdate() {
console.log( "1 isoverflown bfr redux-this.props.setScrollStatus inside componentDidUpdate",isOverflown(document.getElementById('content')));
//redux props
this.props.setScrollStatus( isOverflown(document.getElementById('content')));
console.log( "2 isoverflown aftr redux-this.props.setScrollStatus inside componentDidUpdate",isOverflown(document.getElementById('content')));
//redux props
this.props.scrollStatus ? console.log (" 3 this.props.scrollStatus true inside componentDidUpdate") : console.log("this.props.scrollStatus false inside componentDidUpdate");
console.log ("4 state scrollstatus inside componentDidUpdate" , this.state.scrollStatus)
}
componentDidMount(){
console.log( "3 isoverflown bfr set",isOverflown(document.getElementById('content')));
this.props.setScrollStatus("set inside didMount", isOverflown(document.getElementById('content')));
console.log( "4 isoverflown aftr set didMount",isOverflown(document.getElementById('content')));
this.props.scrollStatus ? console.log ("scrollStatus true") : console.log("scrollStatus false");
console.log ("state scrollstatus inside didMount" , this.state.scrollStatus)
}
render() {
<div style={{overflowY:'scroll',overflowX:'hidden',height:'50vh',border:'none'}}>
{
this.props.rowData.map((row,index )=>
<div style={{ display: 'flex',flexWrap: 'wrap', border:'1px solid black'}}
onClick={ e => { this.setState({ selected: index, detailsDivVisible: true,scrolled:isOverflown(document.getElementById('content')),
scrollStatus:isOverflown(document.getElementById('content')) },
this.props.setScrollStatus( isOverflown(document.getElementById('content'))),this.forceUpdate(),console.log ("onclick this.state.scrollStatus", this.state.scrollStatus),
console.log ("onclick pure funtion", isOverflown(document.getElementById('content'))));
const mapDispatchToProps = (dispatch) => {
return {
setScrollStatus: function (scrollStaus) {dispatch (setScrollStatus(scrollStaus))},
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Page);回答 2
Stack Overflow用户
发布于 2017-08-23 17:21:22
感谢您的回复。但是，以不涉及生命周期/事件的不同方式解决这个问题：
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' }}>
Stack Overflow用户
发布于 2017-09-18 12:24:21
让我们简化一下。您所需要的是，每次有人在div.Please中单击某个代码片段时，都会发出减缩器，请仔细查看注释。
//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>
https://stackoverflow.com/questions/45721015
复制相似问题
腾讯云开发者
