React-Native 코드 :
const StyledButton = styled.TouchableHighlight`
width:250px;
background-color:${props => (props.transparent ? "transparent" : "#f3f8ff")};
padding:15px;
border:${props => (props.transparent ? "1px solid #f3f8ff " : 0)}
justify-content:center;
margin-bottom:20px;
border-radius:24px
`;
StyledTitle = styled.Text`
text-transform: uppercase;
text-align: center;
font-weight: bold;
letter-spacing: 3;
color: ${props => (props.transparent ? "#f3f8ff " : "#666")};
`;
?아래 줄에서 " "는 무엇을 의미 합니까?
background-color:${props => (props.transparent ? "transparent" : "#f3f8ff")};
border:${props => (props.transparent ? "1px solid #f3f8ff " : 0)};
color: ${props => (props.transparent ? "#f3f8ff " : "#666")};
react-native가 아니라 javascript 의 if-else 문 단축 스타일입니다 .
조건부 (삼항) 연산자는 세 개의 피연산자를 사용하는 유일한 JavaScript 연산자입니다. 조건과 물음표 (?), 조건이 참일 경우 실행할 표현식, 콜론 (:), 마지막으로 다음 표현식 조건이 거짓이면 실행합니다. 이 연산자는 if 문의 바로 가기로 자주 사용됩니다.
전의:
function getFee(isMember) {
return (isMember ? '$2.00' : '$10.00');
}
console.log(getFee(true));
// expected output: "$2.00"
console.log(getFee(false));
// expected output: "$10.00"
console.log(getFee(1));
// expected output: "$2.00"
(props.transparent ? "transparent" : "#f3f8ff")
//meaning :
if(props.transparent==true){
return "transparent"
}else{
return "#f3f8ff"
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다