왕초보112
256
2020-08-27 00:49:03
4
1418

react에서 삼항연산자로 style반환하는법아시는분 있으신가여 ㅠ


{data.map((item, idx) => ( 

                            <PdfRow key={idx}>

                                <PdfCell cellLeft style={styles.cellBottom}>{item['GDS_NM']}</PdfCell>

                                <PdfCell style={styles.cellBottom}>{item['CAR_NO']}</PdfCell>

                                <PdfCell style={styles.cellBottom}>{item['BIZ_DATE']}</PdfCell>

                                <PdfCell style={styles.cellBottom}>L</PdfCell>

                                <PdfCell style={styles.cellBottom}>{item['QTY']}</PdfCell>

                                <PdfCell style={styles.cellBottom}>{numberFormat(item['PRICE'])}</PdfCell>

                                {selectTab == 1 &&

                                <>  

                                    <PdfCell style={styles.cellBottom}>{numberFormat(item['SPLY_AMT'])}</PdfCell>

                                    <PdfCell style={styles.cellBottom}>{numberFormat(item['VAT'])}</PdfCell>

                                </>}

                                <PdfCell style={styles.cellBottom}>{numberFormat(item['AMOUNT'])}</PdfCell>

                            </PdfRow>

                                ))}

해당소스인데 이소스에서 idx %2 ===0 ? aaaaaa  : bbbbbbb 라는 조건문으로 a에는 푸른색 b에는 흰색이 나오도록 스타일을 리턴하고싶은데 스타일에 적용이안되는데 왜이럴까여

0
  • 답변 4

  • 경직학
    168
    2020-08-27 00:59:18

    괄호 () 로 묶어서도 안되나요 ?

  • configurer
    288
    2020-08-27 08:55:10

    class로 컨트롤해도안되나요 ?

    aa.classList.add("blue")

    bb.classList.add("white")


    뭐 이런식으로..? 당연 blue, white는 css로 색상 지정해주셔야 하고

  • 호나우딩요
    34
    2020-08-27 16:09:33 작성 2020-08-27 16:12:06 수정됨

    react에서 jsx안에서 style을 줄 때는 

    ex) <div style={{color : "black"}}>

            content

          </div>

    의 형식으로 줘야 하구요.

    마찬가지로 삼항 연산자의 경우

    ex) <div style={{color : idx % 2 === 0 ? 'blue' : 'white'}}>

            content

          </div>

    의 형식으로 사용하시면 됩니다.

  • 왕초보112
    256
    2020-08-30 17:40:36
    정말 감사합니다
  • 로그인을 하시면 답변을 등록할 수 있습니다.