Ionic React에서 다양한 수의 항목으로 목록을 만들고 싶습니다. 지금까지는 이 접근 방식을 알고 있습니다. 내 목록의 항목은 examples 배열에 저장됩니다 .
<IonList>
{examples.map((example) => (
<IonItem>
<IonLabel>{example}</IonLabel>
</IonItem>
))}
</IonList>
이 목록의 항목은 각 항목 아래에 줄로 구분됩니다. 불행히도 마지막 항목 아래에도 줄이 표시됩니다. 이를 방지하기 위한 제 생각은 위의 코드 블록에서 마지막 예제 를 제외하고 별도로 처리하는 것입니다.
<IonItem lines="none">
<IonLabel>{lastExample}</IonLabel>
</IonItem>
이 경우 이 블록 주위에 조건을 래핑하여 다음을 방지해야 합니다. 그리고 예제가 없고 예제 배열과 lastExample 변수가 모두 비어 있는 경우 렌더링됩니다 . 코드에서 이 조건을 어떻게 구현할 수 있습니까? 마지막 항목이 이전 항목과 다르게 보이는 목록을 만드는 더 좋은 방법이 있습니까?
@sharun kk 덕분에 해결책을 찾았습니다. 조건식이 type 을 반환 'false | "none"'했지만 false허용되지 않기 때문에 게시물에서 여전히 오류가 발생했습니다 . undefined대신 해야 합니다. ?조건 연산자를 사용하여 솔루션을 약간 수정했습니다 .
{examples.map((example, index) => (
<IonItem button lines={examples.length - 1 === index ? "none" : undefined}>
<IonIcon icon={personCircleOutline} slot="start" size="large" />
<IonLabel>{example}</IonLabel>
</IonItem>
))}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다