JSX를 곱하거나 연결할 수 있습니까?

나는 React와 함께 Font Awesome을 사용하여 별의 행을 만듭니다. 나는 숫자를 취하고 그 많은 별을 만드는 함수를 가지고있다. 반응 구성 요소 내에서이 작업을 수행하는 가장 좋은 방법을 찾으려고합니다. 기본적으로, 나는 그것이 동적으로 전달 있는지에 따라 반복 얻을 수있는 번호로 JSX 요소를 곱해야 다음 JSX가 문자열 인 경우JSX를 곱하거나 연결할 수 있습니까?

reviewStars(num) { 
    const star = <i className="fa fa-star" aria-hidden="true"></i>; 
    const getStarCount = star.repeat(num); 
    return getStarCount; 
    };

는,이 작업을 것이지만,이 아니기 때문에, I 거기에 반복을 호출 할 수 없습니다 (오류는 별표가 함수가 아닙니다). 작은 따옴표로 묶은 다음이를 바꿀 수는 있지만 더 나은 방법이 있는지 궁금해하십니까? 감사.

출처

2016-06-23 hidace

이 같은 것을보십시오 :

이

reviewStars(num) { 
    let stars = []; 
    for(let i= 0; i < num; i++) { 
    stars.push(<i key={i} className="fa fa-star" aria-hidden="true"></i>); 
    } 
    return (
    <div>{stars}</div> 
); 
};

편집 : 가 JSX의 유효성을 유지하기 위해 목록

출처

2016-06-23 20:54:09

정말 고맙습니다. 나는 또한 for 루프와 비슷한 것을 시도했다. 나는 그저 (

{stars}

)와 같은 요소 배열을 렌더링 할 수 있다는 것을 몰랐습니다. 감사! – hidace

에 키를 추가해야합니다, 먼저 부모의 형제 요소를 포장해야 요소 인 경우 <span> 또는 <div>입니다.

그런 다음 num 번 루프를 실행하고 스타에 대해 JSX를 반복하여 래퍼 내부로 돌아갈 변수에 누적시켜야합니다. 이 같은

뭔가 당신

reviewStars(num) { 
    let stars = []; 

    for (let i = 0; i < num; i++) { 
     stars.push(<i className="fa fa-star" aria-hidden="true" key={i} />; 
    } 

    return (
     <span> 
      {stars} 
     </span> 
    ); 
};

출처

2016-06-23 21:00:10

Array.from() 메서드에 대한 트릭을 할해야 할 것은 지정된 길이의 배열을 만듭니다. 여기 MDN을 참조하십시오.

<div> 
{ Array.from({ length: num }, (_, i) => 
    <i key={i} className="fa fa-star" aria-hidden="true"></i>) } 
</div>

매퍼는 두 번째 인수 (색인)의 키를 각 하위 요소에 할당합니다.

출처

2016-06-23 23:01:17 xyc

질문을 개선하기위한 설명이나 참고 자료가 있으십니까? – dakab

이 MDN 링크로 업데이트되었습니다. – xyc

고마워, 나는 이런 우아한 해결책을 찾고 있었다. –

JSX를 곱하거나 연결할 수 있습니까?

답변

관련 문제