在div onclick之后更新Redux prop/state

Question

我有一个表 - 让我们称之为表1.当单击表1中的一行时,正在显示另一个表,我们称之为表2.表2显示了与表1中单击的行相关的数据.有时需要垂直滚动要显示在表2中,有时不是 - 取决于行数.需要解决的问题:当没有显示滚动时,边框会发生不必要的转换:

.解决方案的想法:根据显示滚动是否退出的条件 " 改变margin-right".将此条件的结果保存到Redux prop:element.scrollHeight> element.clientHeight || element.scrollWidth>
element.clientWidth

问题:尝试将滚动的显示/不显示从不同的React事件(如componentDidMount,componentWillReceiveProps,CopmponentDidUpdate(设置状态导致infinte循环)和click事件更新到redux prop中.尝试使用forceUpdate()之后将道具设置为Redux也是如此.

当console.log以chrome(F12)进入控制台时,唯一与滚动条的显示/非显示正确关联的结果来自componentDidUpdate,并且它没有反映在redux prop中(isoverflown函数返回true ,redux this.props.scrollStatus和this.state.scrollStatus都是假的).也不喜欢document.getElementById用于包含行的div,因为它在props和state中打破了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);

Answer 1

感谢你的回复。但是，以不同的方式解决它，不涉及生命周期/事件：

\n\n

1）通过将单行高度乘以要显示的项目数来计算滚动的高度（arr.length，arr来自JSON）

\n\n

2）将滚动的最大高度设置为所需的值

\n\n

3）将内容的最大高度设置为计算出的高度：

\n\n

结果是一个始终以正确高度显示的滚动条。这解决了缩进问题。

\n\n

\r\n

\r\n

\t\r\n<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\' }}> \r\n\r\n<div style={{ width:\'inherit\', maxHeight:this.props.this.props.rowData[this.state.selected]\xe2\x80\x8c\xe2\x80\x8b.rowItemsList.length * singleRowHeight + \'px\' }}>

\r\n

\r\n

\r\n

\n