현재는 배열을 통해 매핑하고 각 항목에 대해 원을 표시합니다.
<div className='circlesCont'>
{launches.map((launch, index) => (
<div
className={`${'circle'} ${
index === slideNumber ? 'selectedPage' : ''
}`}
key={index}
id={index}
onClick={handleCirclePageClick}
></div>
))}
</div>
한 번에 8 개의 항목 만 표시되도록 만들려고합니다.
예를 들어 항목 0 ~ 7 , 7 ~ 13 등입니다.
이것은지도 컨테이너 내부의 논리로 수행 할 수 있습니까?
현재 색인이 8 이상인 항목을 숨기고 처음 7 개를 표시 할 수 있지만 필요한 동작을 얻을 수있는 방법을 찾을 수 없습니다.
미리 감사드립니다
.splice필요에 따라 동적 청크를 생성하는 데 사용할 수 있습니다 . 각 launches배열 항목에는 렌더링 여부를 선택 하는 isVisible속성 이 포함됩니다 . 나는 그것을위한 샌드 박스를 만들었다. 주석과 함께 참조 할 수있는 코드는 다음과 같습니다.
import React, { useState } from "react";
import "./styles.css";
const defaultState = [
{ name: "Hey1", isVisibile: true },
{ name: "Hey2", isVisibile: true },
{ name: "Hey3", isVisibile: true },
{ name: "Hey4", isVisibile: true },
{ name: "Hey5", isVisibile: true },
{ name: "Hey6", isVisibile: true },
{ name: "Hey7", isVisibile: true },
{ name: "Hey8", isVisibile: true },
{ name: "Hey9", isVisibile: true },
{ name: "Hey10", isVisibile: true },
{ name: "Hey11", isVisibile: true },
{ name: "Hey12", isVisibile: true },
{ name: "Hey13", isVisibile: true },
{ name: "Hey14", isVisibile: true },
{ name: "Hey15", isVisibile: true },
{ name: "Hey16", isVisibile: true },
{ name: "Hey17", isVisibile: true },
{ name: "Hey18", isVisibile: true },
{ name: "Hey19", isVisibile: true }
];
export default function App() {
const [state, setState] = useState(defaultState);
const handleChunk = (start, end) => {
// Get the chunk elements by using splice on copy of state;
const chunkElements = [...state].splice(start, end - start);
// For chunk elements, set the isVisible to false.
chunkElements.forEach((ele) => (ele.isVisibile = false));
// Make again a new copy of our state.
const newState = [...state];
// In our new state, update the visibility of the chunk elements.
newState.splice(start, end - start, ...chunkElements);
setState(newState);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<ul>{state.map((ele) => ele.isVisibile && <li>{ele.name}</li>)}</ul>
<button onClick={() => handleChunk(3, 7)}>Chunk 3-7 it!!</button>
<button onClick={() => handleChunk(8, 12)}>Chunk 8-12 it!!</button>
</div>
);
}
위는 매우 원시적 인 구현입니다. 상태 항목의 가시성을 처리하는 방법은 실제로 사용자에게 달려 있지만 함수에 명시된대로 청킹을 수행 할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다