Tôi có một bảng - hãy gọi nó là bảng 1. Khi nhấp vào một hàng trong bảng 1, một bảng khác đang được hiển thị, hãy gọi bảng này 2. Bảng 2 hiển thị dữ liệu liên quan đến hàng được nhấn trong bảng 1. Đôi khi một cuộn dọc cần được hiển thị trong bảng 2 và đôi khi không -depends vào số hàng. Cần phải giải quyết: có một quá trình chuyển đổi không mong muốn của biên giới khi cuộn không được hiển thị:Cập nhật Redux prop/state sau div onclick
. Ý tưởng cho giải pháp: "thay đổi lề phải" theo các điều kiện cho biết cuộn có thoát hay không. Lưu kết quả của điều kiện này vào Redux prop: element.scrollHeight> element.clientHeight || element.scrollWidth>
element.clientWidth
Vấn đề: Đang cố gắng để cập nhật màn hình hiển thị/không hiển thị của cuộn vào prop Redux từ Phản ứng các sự kiện khác nhau như componentDidMount, componentWillReceiveProps, CopmponentDidUpdate (thiết lập nhà nước gây ra vòng lặp infinte ở đây) và từ sự kiện nhấp chuột. Hãy thử sử dụng forceUpdate() sau khi đặt đạo cụ thành Redux.
Khi console.log vào bảng điều khiển trong chrome (F12), kết quả duy nhất tương quan chính xác với màn hình hiển thị/không hiển thị của thanh cuộn đến từ bên trong componentDidUpdate và nó không phản ánh trong redux prop (hàm isoverflown trả về true, redux this.props.scrollStatus và this.state.scrollStatus là false). Cũng không thích việc sử dụng document.getElementById cho div chứa các hàng, bởi vì nó phá vỡ thao tác của dom từ bên trong các đạo cụ và trạng thái, nhưng không tìm thấy một giải pháp khác cho bây giờ.
Các F12 console khi hiển thị thanh cuộn: 
Các F12 console khi không có thanh cuộn được hiển thị: 
.
Phần còn lại của các mã:
1) hành động:
export function setScrollStatus(scrollStatus) {
return {
type: 'SET_SCROLL_STATUS',
scrollStatus: scrollStatus
};
}2) giảm:
export function scrollStatus(state = [], action) {
switch (action.type) {
case 'SET_SCROLL_STATUS':
return action.scrollStatus;
default:
return state;
}
}3) Page.js (xin vui lòng click vào hình để xem mã)
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);
Bạn có mã somowhere như github hoặc lâu hơn. Sẽ phải chạy dự án để xem vấn đề. –
tuyệt vời mà bạn có thể giải quyết nó. –
Cảm ơn bạn đã sẵn sàng trợ giúp. – Dani