jsx 내의 if-else 문: 반응JS
특정 상태가 지정되면 렌더링 기능을 변경하고 하위 렌더링 기능을 실행해야 합니다.
예를 들어 다음과 같습니다.
render() {
return (
<View style={styles.container}>
if (this.state == 'news'){
return (
<Text>data</Text>
)
}
</View>
)
}
어떻게 하면 씬을 변경하지 않고 탭을 사용하여 동적으로 콘텐츠를 변경할 수 있을까요?
델 텔레폰 어드바이저:
if-else 문은 JSX 내에서 작동하지 않습니다.이것은 JSX가 함수 호출과 객체 구성을 위한 구문 설탕이기 때문입니다.
기본 규칙:
JSX는 기본적으로 통사당이다.컴파일 후 JSX 표현식은 JavaScript 함수 호출이 되어 JavaScript 객체에 대해 평가됩니다.JavaScript 표현식은 모두 곱슬괄호로 묶어서 JSX에 넣을 수 있습니다.
그러나 문이 아닌 식만 JSX 내에 직접 문(if-else/switch/for)을 넣을 수 없습니다.
는, 「」를 합니다.ternary operator 이렇게요.
render() {
return (
<View style={styles.container}>
{this.state.value == 'news'? <Text>data</Text>: null }
</View>
)
}
는 '함수'에서 '를 호출하는 것입니다.jsx 모든 을 다 넣으세요if-else안에 는 이렇게 있습니다.
renderElement(){
if(this.state.value == 'news')
return <Text>data</Text>;
return null;
}
render() {
return (
<View style={styles.container}>
{ this.renderElement() }
</View>
)
}
즉시 호출된 함수 표현(IIFE)을 사용하면 말을 할 수 있습니다.
render() {
return (
<View style={styles.container}>
{(() => {
if (this.state == 'news'){
return (
<Text>data</Text>
)
}
return null;
})()}
</View>
)
}
다음으로 작업 예를 제시하겠습니다.
하지만, 당신의 경우, 삼원 연산자와 함께 할 수 있습니다.
이 방법이 가장 좋은 방법이라고 생각합니다.
{this.state.yourVariable === 'news' && <Text>{data}<Text/>}
저는 이렇게 하면 잘 작동해요.
constructor() {
super();
this.state ={
status:true
}
}
render() {
return(
{ this.state.status === true ?
<TouchableHighlight onPress={()=>this.hideView()}>
<View style={styles.optionView}>
<Text>Ok Fine :)</Text>
</View>
</TouchableHighlight>
:
<Text>Ok Fine.</Text>
}
);
}
hideView(){
this.setState({
home:!this.state.status
});
}
당신은 이걸 할 수 있다.JSX 컴포넌트 앞에 "return"을 붙이는 것을 잊지 마십시오.
예:
render() {
if(this.state.page === 'news') {
return <Text>This is news page</Text>;
} else {
return <Text>This is another page</Text>;
}
}
인터넷에서 데이터를 가져오는 예:
import React, { Component } from 'react';
import {
View,
Text
} from 'react-native';
export default class Test extends Component {
constructor(props) {
super(props);
this.state = {
bodyText: ''
}
}
fetchData() {
fetch('https://example.com').then((resp) => {
this.setState({
bodyText: resp._bodyText
});
});
}
componentDidMount() {
this.fetchData();
}
render() {
return <View style={{ flex: 1 }}>
<Text>{this.state.bodyText}</Text>
</View>
}
}
JavaScript를 사용하여 조건문을 이스케이프하거나 래퍼 클래스를 작성할 필요 없이 JSX 내에 조건문을 쓸 수 있는 Babel 플러그인이 있습니다.JSX Control Statements라고 합니다.
<View style={styles.container}>
<If condition={ this.state == 'news' }>
<Text>data</Text>
</If>
</View>
Babel 설정에 따라 다소 설정이 필요하지만 Import할 필요가 없으며 JSX를 남기지 않고 조건부 렌더링을 할 수 있어 코드가 깔끔하게 보입니다.
if-else 대신 스위치 케이스는 어떨까요?
render() {
switch (this.state.route) {
case 'loginRoute':
return (
<Login changeRoute={this.changeRoute}
changeName={this.changeName}
changeRole={this.changeRole} />
);
case 'adminRoute':
return (
<DashboardAdmin
role={this.state.role}
name={this.state.name}
changeRoute={this.changeRoute}
/>
);
default:
return <></>;
}
말은 필요 .if else조건을 지정합니다.를 들어와 같은 할 수 있습니다. 예를 들어 다음과 같습니다.
state={loading:false}
<View>
{loading ? <Text>This is a test For if else condition</Text> : <ActivityIndicator/>
</View>
render() {
return (
<View style={styles.container}>
(() => {
if (this.state == 'news') {
return <Text>data</Text>
}
else
return <Text></Text>
})()
</View>
)
}
https://react-cn.github.io/react/tips/if-else-in-JSX.html
React에 if 조건이 있는 중첩된 루프의 간단한 예:
데이터 예:
menus: [
{id:1, name:"parent1", pid: 0},
{id:2, name:"parent2", pid: 0},
{id:3, name:"parent3", pid: 0},
{id:4, name:"parent4", pid: 0},
{id:5, name:"parent5", pid: 0},
{id:6, name:"child of parent 1", pid: 1},
{id:7, name:"child of parent 2", pid: 2},
{id:8, name:"child of parent 2", pid: 2},
{id:9, name:"child of parent 1", pid: 1},
{id:10, name:"Grand child of parent 2", pid: 7},
{id:11, name:"Grand child of parent 2", pid: 7},
{id:12, name:"Grand child of parent 2", pid: 8},
{id:13, name:"Grand child of parent 2", pid: 8},
{id:14, name:"Grand child of parent 2", pid: 8},
{id:15, name:"Grand Child of Parent 1 ", pid: 9},
{id:15, name:"Child of Parent 4 ", pid: 4},
]
중첩 루프 및 조건:
render() {
let subMenu='';
let ssubmenu='';
const newMenu = this.state.menus.map((menu)=>{
if (menu.pid === 0){
return (
<ul key={menu.id}>
<li>
{menu.name}
<ul>
{subMenu = this.state.menus.map((smenu) => {
if (menu.id === smenu.pid)
{
return (
<li>
{smenu.name}
<ul>
{ssubmenu = this.state.menus.map((ssmenu)=>{
if(smenu.id === ssmenu.pid)
{
return(
<li>
{ssmenu.name}
</li>
)
}
})
}
</ul>
</li>
)
}
})}
</ul>
</li>
</ul>
)
}
})
return (
<div>
{newMenu}
</div>
);
}
}
<Card style={
{ backgroundColor: '#ffffff',
height: 150, width: 250, paddingTop: 10 }}>
<Text style={styles.title}>
{item.lastName}, {item.firstName} ({item.title})
</Text>
<Text > Email: {item.email}</Text>
{item.lastLoginTime != null ?
<Text > Last Login: {item.lastLoginTime}</Text>
: <Text > Last Login: None</Text>
}
{
item.lastLoginTime != null ? <Text >
Status: Active</Text> : <Text > Status: Inactive</Text>
}
</Card>
함수 컴포넌트에서 조건문을 사용하고 싶다면 jsx에서 함수를 호출하여 모든 조건 논리를 그 안에 넣을 수 있습니다.
conditionalRender(){
if(state === 'news') {
return <Text>data</Text>;
}
else(state !== 'news') {
return <Text>Static Value</Text>;
}
}
render() {
return (
<View style={styles.container}>
{ conditionalRender() }
</View>
)
}
반환 블록에는 if-else 조건을 지정할 수 없습니다.또한 3진 블록을 사용합니다.state는 객체가 됩니다.값과 비교하지 말고 확인할 상태 값을 확인합니다.또한 하나의 요소만 반환합니다.View에서 반환하십시오.
render() {
return (
<View style={styles.container}>
{this.state.page === 'news'? <Text>data</Text>: null}
</View>
)
}
이 문제는 다음 두 가지 방법으로 해결할 수 있습니다.
- 빈칸만 추가하여 다른 조건 작성
<div>요소. - 그렇지 않으면 null을 반환합니다.
render() {
return (
<View style={styles.container}>
if (this.state == 'news'){
return (
<Text>data</Text>
);
}
else {
<div> </div>
}
</View>
)
}
방금 시도했습니다.
return(
<>
{
main-condition-1 &&
main-condition-2 &&
(sub-condition ? (<p>Hi</p>) : (<p>Hello</p>))
}
</>
)
어떻게 생각하는지 알려줘!!!
코드를 적어두기만 하면 됩니다.
<>
{row.photo != null ? <img src={serverPath(row.photo)} className='img-fluid shadow-4' alt="" /> : ''}
</>
이 경우 3진 연산자를 사용할 수 있습니다.또는 조건이1개뿐인 경우에는 & 연산자를 사용할 수 있습니다.다음과 같이:-
//This is for if else
render() {
return (
<View style={styles.container}>
{this.state == 'news') ?
<Text>data</Text>
: null}
</View>
)
}
//This is only for if or only for one condition
render() {
return (
<View style={styles.container}>
{this.state == 'news') &&
<Text>data</Text>
}
</View>
)
}
언급URL : https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs
'programing' 카테고리의 다른 글
| 클래스는 React를 확장합니다.구성 요소가 반응에서 getInitialState를 사용할 수 없음 (0) | 2023.03.17 |
|---|---|
| jQuery를 사용하여 클릭 시 다른 CSS 클래스 적용 (0) | 2023.03.12 |
| apply_filters(...)는 WordPress에서 실제로 무엇을 합니까? (0) | 2023.03.12 |
| 본문 데이터가 작동하지 않는 게시물 가져오기 매개 변수가 비어 있습니다. (0) | 2023.03.12 |
| 로컬 파일에서 React JS로 json 데이터 로드 (0) | 2023.03.12 |