Używając "react-scroll-into-view", implementuję "scrollowanie" do danego elementu na podstawie id
, jak tutaj: https://codesandbox.io/s/react-scroll-into-view-icbws
Po przeniesieniu kodu do swojej aplikacji zauważyłem, że gdy odwołuję się do "statycznego" elementu np. <div id="a">a</div>
wszystko działa poprawnie (po naciśnięciu przycisku ekran przesuwa się do diva), natomiast w przypadku elementów wygenerowanych dynamicznie (np. przy wykorzystaniu stanu?) otrzymuję po naciśnięciu przycisku: Uncaught TypeError: Cannot read property 'scrollIntoView' of null
w konsoli.
Domyślam się, że chodzi, o kolejność renderowania danych, jednak jak wymusić ich kolejność? Poprzez componentDidMount()
?
Poniżej zamieszczam większy fragment kodu, który może być istotny, szczególnie 47 i 57 linia:
class App extends Component {
state = {
activeCategories: [...categories],
isCheckedCategories: Object.fromEntries(categories.map(category => [category, true])),
};
changeEvent = event => {
let activeCategories = this.state.activeCategories;
let selectedCategory = event.target.value;
if (event.target.checked === true) {
activeCategories.push(selectedCategory);
} else {
let categoryIndex = activeCategories.indexOf(selectedCategory);
activeCategories.splice(categoryIndex, 1);
}
this.setState({
isCheckedCategories: {
...this.state.isCheckedCategories,
[selectedCategory]: !this.state.isCheckedCategories[selectedCategory]
}
});
};
render() {
const {activeCategories, isCheckedCategories} = this.state;
return (
<>
<GlobalStyle/>
{categories.map(category => <label>
<Input
key={category}
type="checkbox"
name={category}
value={category}
onChange={this.changeEvent}
checked={isCheckedCategories[category]}
/>
{category}
</label>
)}
<MapContainer activeCategories={activeCategories}/>
<Animation>
{galleries.map(gallery => (activeCategories.includes(gallery.border)) &&
<Carousel>
{gallery.photos.map(photo => <>
<LazyImage id={`${gallery.index}`} <!-- Wspomniany błąd -->
key={photo.url}
src={photo.url}
alt={photo.title}
aspectRatio={[16, 9]}
/>
<figcaption>{photo.title}</figcaption>
</>)}
</Carousel>)}
</Animation>
<div id="a">a</div> <!-- Poprawne przesunięcie -->
</>
);
}
}
export default App;