的if-else裏面JSX聲明：ReactJS

我需要改變渲染功能和運行一些子渲染功能的特定狀態給予時的if-else裏面JSX聲明：ReactJS

例如：

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

我怎樣才能實現，如果沒有改變場景，我將使用選項卡動態更改內容。

來源

2017-05-18 user8026867

按DOC：

if-else語句不JSX裏面工作。這是因爲對於函數調用和對象構造，JSX只是語法糖。

基本規則：

JSX是根本syntactic sugar。編譯之後，JSX表達式變成常規的JavaScript函數調用並評估爲JavaScript對象。我們可以在JSX中嵌入任何JavaScript expression，方法是將它包裝在花括號中。

但只有表達式語句並不意味着直接我們不能把任何聲明（的if-else /開關/爲）內JSX。

如果你想渲染單元有條件然後使用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> 
    ) 
}

來源

2017-05-18 11:12:47

我可以這樣嗎？渲染（）{ 回報（ <查看風格= {} styles.container> 如果（this.state == '新聞'）{ 回報（數據） } – user8026867

所以返回內部返回是可能的嗎？或者在同一個渲染函數場景中有兩個不同的返回值我需要改變返回 – user8026867

的子內容是可以的，但是，直接以不同的方式，我們不能在JSX中使用if/else，因此使用三元運算符來處理條件，使用這個：'render（）{ \t return（ \t \t \t \t \t {this.state =='news'？數據：空} \t \t \t） }' –

你可以這樣做。不要忘記在你的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> 
    } 
}

來源

2017-05-18 11:08:03

你能告訴我一些充滿工作示例對不起，我是新來這個 – user8026867

@ user8026867例如添加 –

我想從函數 – user8026867

您不能在返回塊中提供if-else條件，也可以使用三元塊。國家將是一個對象，你不應該用一個值進行比較吧，看你要檢查哪個狀態值，還返回只返回一個元素，確保它們包裝在一個視圖

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

    ) 
}

來源

2017-05-18 11:39:44

什麼是div ..... – user8026867

我的錯誤，沒有看到react-native標記，它應該是視圖而不是div –

btw我需要在RNFetchBlob函數後返回文本 – user8026867

我找到這種方式是最好的：

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

來源

2017-05-18 13:35:32 sooper

我同意，這是最好的的一羣。用三元運算符返回'null'是不必要的;） – MMachinegun

通常情況下，我這樣做：

_renderNews() { 
    if (this.state.page === 'news') { 
    return <Text>{data}</Text> 
    } 
    return null 
} 

render() { 
    return (
    <View>{this._renderNews}</View> 
) 
}

來源

2017-05-18 18:14:49

的if-else裏面JSX聲明：ReactJS

回答

相關問題