사용하게 될 가장 쉬운 목록 서식입니다.
8226 단어 javascriptreact
<strong>
를 사용하는 기능을 원했기 때문에 원래 목록을 처리하기 위한 세련되지 않은 솔루션을 가지고 있었습니다.// ORIGINAL
export default function ListText({ isBold = false }) {
const animals = ['Dog', 'Cat', 'Rhino', 'Penguin'];
return animals.map((animal, index) => {
const totalAnimals = animals.length;
const last = index === totalAnimals - 1;
const comma = !last && totalAnimals > 2;
const or = totalAnimals >= 2 && last;
const renderAnimal = isBold ? <strong>{animal}</strong> : animal;
return (
<React.Fragment key={index}>
{or && 'or '}
{renderAnimal}
{comma && ','}
{!last && ' '}
</React.Fragment>
})
}
The above piece of code would render
Dog, Cat, Rhino, or Penguin
우리 팀은 마감 시간이 촉박했기 때문에 이 코드 조각은 보기 흉하게 프로덕션에 허용되었습니다. 공정하게 말하면 이 코드는 예상대로 작동하지만 더 나은 솔루션을 찾을 수 있는지 직접 확인했습니다.
구조에 대한 Intl.ListFormat
나는 여러분 모두가 Intl.ListFormat에 대한 MDN 문서를 읽을 것을 권장하지만 기본적으로 언어 구분 목록 서식을 활성화할 수 있습니다. 맞습니다. 이것은 모든 언어에서 작동합니다 🤯
export default function ListText({ isBold = false }) {
const animals = ['Dog', 'Cat', 'Rhino', 'Penguin'];
return new Intl.ListFormat('en', { style: 'long', type: 'disjunction' })
.formatToParts(animals)
.map(({ type, value }) => {
return type === 'element' && isBold ? <strong>{value}</strong> : value;
})
}
The above piece of code would still render
Dog, Cat, Rhino, or Penguin
이것을 분해합시다.
'long'
스타일과 'disjunction'
유형을 사용하도록 구성을 설정했습니다. formatToParts
메서드에 전달하면 쉼표 및/또는 삽입된 새 배열이 반환됩니다(길이는 5가 됨)element
인지 확인합니다. element
는 항상 배열의 값과 일치하며 유형literal
은 각각 쉼표 또는 또는입니다. isBold
prop이 true
로 설정되어 있는지 확인하고 <strong>
태그 사이의 값을 반환합니다. 그렇지 않으면 값을 전달합니다. 더 확장 가능
우리의 코드는 이제 더 확장 가능합니다. 예를 들어 선언된
animals
배열 대신 소품 중 하나로 배열을 전달할 수 있습니다. Intl.ListFormat에서 type
를 변경하여 'or' 대신 'and'를 사용할 수 있도록 소품을 추가할 수도 있습니다.마무리
유사한 문제에 직면한 개발자가 이 기능을 좀 더 유용하게 사용하기를 바랍니다. 아래의 CodePen으로 장난을 칠 수 있습니다.
Reference
이 문제에 관하여(사용하게 될 가장 쉬운 목록 서식입니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/asg5704/easiest-list-formatting-youll-ever-use-57n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)