javascript - câu lệnh if-else bên trong jsx: ReactJS

Tôi cần thay đổi hàm render và chạy một số hàm render phụ khi một trạng thái cụ thể được đưa ra,

Ví dụ:

render() {
    return (   
        <View style={styles.container}>
            if (this.state == 'news'){
                return (
                    <Text>data</Text>
                )
            }
        </View>
    )
}

Làm thế nào tôi có thể thực hiện điều đó mà không thay đổi cảnh, tôi sẽ sử dụng tab để thay đổi nội dung một cách động.

Câu trả lời #1

Theo DOC:

Câu lệnh if-else không hoạt động bên trong JSX. Điều này là vì JSX chỉ là cú pháp ngắn gọn cho các lời gọi hàm và việc khởi tạo đối tượng.

Quy tắc cơ bản:

JSX về cơ bản là đường ngọt cú pháp. Sau khi biên dịch, các biểu thức JSX trở thành các lời gọi hàm JavaScript thông thường và đánh giá thành các đối tượng JavaScript. Chúng ta có thể nhúng bất kỳ biểu thức JavaScript nào trong JSX bằng cách bọc nó trong dấu ngoặc nhọn.

Nhưng chỉ là biểu thức chứ không phải câu lệnh, có nghĩa là trực tiếp chúng ta không thể đặt bất kỳ câu lệnh nào (if-else/switch/for) bên trong JSX.

Nếu bạn muốn hiển thị phần tử có điều kiện thì hãy sử dụng toán tử ba ngôi, như sau:

render() {
    return (   
        <View style={styles.container}>
            {this.state.value == 'news'? <Text>data</Text>: null }
        </View>
    )
}

Một lựa chọn khác là, gọi một hàm từ jsx và đặt tất cả logic if-else bên trong đó, như sau:

renderElement(){
   if(this.state.value == 'news')
      return <Text>data</Text>;
   return null;
}

render() {
    return (   
        <View style={styles.container}>
            { this.renderElement() }
        </View>
    )
}

Câu trả lời #2

Bạn có thể đạt được những gì bạn đang nói bằng cách sử dụng Biểu thức Hàm được Gọi ngay lập tức (IIFE)

render() {
    return (   
        <View style={styles.container}>
            {(() => {
              if (this.state == 'news'){
                  return (
                      <Text>data</Text>
                  )
              }
              
              return null;
            })()}
        </View>
    )
}

Dưới đây là ví dụ đang hoạt động:

Nhưng, trong trường hợp của bạn, bạn có thể giữ nguyên toán tử ba ngôi

Câu trả lời #3

Tôi thấy cách này là đẹp nhất:

{this.state.yourVariable === 'news' && <Text>{data}<Text/>}

Câu trả lời số 4

Tôi thực sự thích cái này và nó hoạt động tốt.

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
  });
}