React에서 특정 조건을 충족하는 행의 배경색 변경

하고 싶은 일

나는 값에 따라 줄의 배경을 바꾸고 싶다.여기서gender는 female이면 핑크색으로 변한다.
다음과 같은 느낌.

기본 방침?

기본적으로 조건에 따라 세 가지 연산자를 사용하는 등 스타일 전환과className을 기본으로 합니다.
조건?A : B;
조건이 사실이면 A, 가짜면 B를 실행합니다.

CSS 전환

먼저 CSS를 전환합니다.
순환에서 표를 묘사하는 동시에gender가female라면 배경의 동작을 바꿀 수 있습니다.

<tbody>
    {
        this.state.listData.map(member => (
            <tr key={member.docId} style={member.gender === "female" ? { background: "#ffe4e1" } : {}}>
                <td>{member.docId}d</td>
                <td>{member.email}</td>
                <td>{member.gender}</td>
                <td><img src={member.avatarUrl} height="30" width="30" alt="" /></td>
                <td><Link to={`/show/${member.docId}`}><Button size="sm" color="primary">詳細</Button></Link></td>
                <td><Link to={`/edit/${member.docId}`}><Button size="sm" color="success">編集</Button></Link></td>
            </tr>
        ))
    }
</tbody>

레벨 전환

class의 경우에도 기본적으로 마찬가지다.
미리

.female {
  background: #ffe4e1;
}

이러한 css는 다음과 같이 class를 전환합니다.

<tbody>
    {
        this.state.listData.map(member => (
            <tr key={member.docId} className={member.gender === "female" ? "female" : null}>
                <td>{member.docId}d</td>
                <td>{member.email}</td>
                <td>{member.gender}</td>
                <td><img src={member.avatarUrl} height="30" width="30" alt="" /></td>
                <td><Link to={`/show/${member.docId}`}><Button size="sm" color="primary">詳細</Button></Link></td>
                <td><Link to={`/edit/${member.docId}`}><Button size="sm" color="success">編集</Button></Link></td>
            </tr>
        ))
    }
</tbody>

또한class명을 더 우아하게 컨트롤하고 싶다면여기기사를 참고할 수 있다.
이상