मैंने अपने डेमो एप्लिकेशन में अनंत स्क्रॉल के साथ एक सूची लागू की है। किसी भी पंक्ति पर क्लिक करने पर यह detail screen पर जाएगी। यह ठीक काम कर रहा है।

**मुझे अंतिम चयनित पंक्ति पर ध्यान केंद्रित करने में समस्या आ रही है ** दूसरे शब्दों में

  1. एप्लिकेशन चलाएं। पहले 20 आइटम लोड करें। अधिक 20 आइटम लोड करने के लिए नीचे स्क्रॉल करें।
  2. फिर किसी भी आइटम मान लीजिए 33तीसरी पंक्ति पर क्लिक करें। यह विस्तृत पृष्ठ में 33 प्रदर्शित करेगा।
  3. अब back बटन पर क्लिक करें यह 0 या पहली पंक्ति पर फोकस दिखाता है। मैं फोकस को 33 पंक्ति पर ले जाना चाहता हूं। या स्क्रॉल स्थिति को 33 स्थिति में ले जाना चाहता हूं।

मैं useContext एपीआई का उपयोग items (अंतिम स्क्रॉल तक सभी पंक्तियां/डेटा) और selected item (चयनित अनुक्रमणिका) को स्टोर करने के लिए करता हूं।

यहाँ मेरा कोड है https://codesandbox.io/s/dank-cdn -2osdg?file=/src/useInfinitescroll.js

import React from "react";
import { withRouter } from "react-router-dom";
import { useListState } from "./context";
function Detail({ location, history }) {
  const state = useListState();
  console.log(state);
  return (
    <div className="App">
      <button
        onClick={() => {
          history.replace({
            pathname: "/"
          });
        }}
      >
        back
      </button>
      <h2>{location.state.key}</h2>
      <h1>detaiils</h1>
    </div>
  );
}

export default withRouter(Detail);


 any update?
0
user12130378 5 अगस्त 2020, 08:01

2 जवाब

सबसे बढ़िया उत्तर

आपके पास अपनी तत्व स्थिति के लिए सत्य का एक ही स्रोत हो सकता है। एक उदाहरण के रूप में मैंने स्थिति की स्थिति को राउटर घटक पर रखा क्योंकि यह ऐप घटक और विवरण का जनक प्रतीत होता है।

const Router = () => {

  const [previousClickedItemPos, setPreviousClickedItemPos] = useState(0);
  
  /* import useLocation so that useEffect can be invoked on-route-change */
  const location = useLocation();

  /* basically pass this to the list items so you can update position on-click */
  function handleClickList(element) {
    setPreviousClickedItemPos(element);
  }

  useEffect(() => {
    /* scroll to the element previously selected */
    window.scrollTo(0, previousClickedItemPos);
  }, [previousClickedItemPos, location]);

  ...

आपके अनंत सूची घटक पर:

<ListItem
    onClick={e => {
        dispatch({
            type: "set",
            payload: items
        });
        handleClickList(e.target.offsetTop); /* update position state */
        goDetailScreen(item);
    }}
    key={item.key}
>
    {item.value}
</ListItem>

कोडसैंडबॉक्स: https://codesandbox.io/s/आधुनिक -breeze-nwtln?file=/src/router.js

0
95faf8e76605e973 5 अगस्त 2020, 09:54

विस्तृत पृष्ठ पर पुनर्निर्देशित करने और इसे किसी स्थिति में संग्रहीत करने से पहले इसका उपयोग करें।

let position = document.documentElement.scrollTop

यह पृष्ठ पर आपकी वर्तमान स्थिति देगा। एक बार जब आप सूची में वापस आ जाते हैं तो उपयोग देखें

window.scrollTo(0, position)

वापस जाने के लिए जहां आप शुरू में थे।

1
Daryl Aranha 5 अगस्त 2020, 09:40