Question

我有一个表 - 让我们称之为表1.当点击表1中的一行时，正在显示另一个表，让我们称之为一个表2.表2显示了与表1中单击的行相关的数据。垂直滚动需要显示在表2中，有时不依赖于行数。需要解决：当未显示滚动时，边框会发生意外转换：

。 解决方案的想法：“更改边距 - 权限”根据显示滚动是否退出的条件。将此条件的结果保存到Redux prop ： element.scrollHeight＆gt; element.clientHeight || element.scrollWidth＆gt;
element.clientWidth

问题：尝试从不同的React事件（例如componentDidMount，componentWillReceiveProps，CopmponentDidUpdate（设置状态导致infinte循环）和来自不同的React事件更新滚动到redux prop的显示/不显示单击event.Tried在将道具设置为Redux之后使用forceUpdate（）。

当console.log以chrome（F12）进入控制台时，唯一与滚动条的显示/非显示正确关联的结果来自componentDidUpdate，并且它没有反映在redux prop中（isoverflown）函数返回true，redux this.props.scrollStatus和this.state.scrollStatus为false）。也不喜欢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

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

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

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

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

结果是滚动显示正确高度的所有时间。这解决了压痕问题。

{{1}}

Answer 2

让我们简化一下。你需要的是每次有人在div中点击时派遣reducer。请找到有用的代码片段，请完成评论。

＆＃13;

//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"); 

}

＆＃13;

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

＆＃13;

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

＆＃13;

在div onclick

2 个答案: