JSON中的react-native過濾器和搜索數據

Question

我是新的react-native。現在我正在爲我的學校作業使用react-native。 在使用react-native之前，我使用了離子型。

我想過濾數據。數據採用JSON格式。 反應天然有一個像離子過濾器？

編號：Angular Filter

Answer 1

號

離子指令filter也做過濾邏輯for loop之前。所以你可以在渲染前自己做。

使用ES6過濾功能或其他使用情況。

例如顯示奇數

render() { 
    return(
     <View> 
      {[1, 2, 3, 4, 5] 
       .filter(value => value % 2 === 1) 
       .map(value => (<Text key={value}>{value}</Text>))} 
     </View> 
    ); 
} 

更進一步，您可以創建一個具有filter屬性的組件，並實現自定義邏輯。那麼你可以像Ionic一樣使用它。

例如

class FilterNumbers extends Component { 

static propTypes = { 
    numbers: PropTypes.array.isRequired, 
    filter: PropTypes.func, 
}; 

static defaultProps = { 
    filter: null, 
    numbers: [], 
}; 

render() { 
    var filteredNumbers = this.props.numbers; 
    if (this.props.filter) { 
     filteredNumbers = this.props.numbers.filter(this.props.filter); 
    } 

    return (
     <View> 
      {filteredNumbers.map(value => (<Text key={value}>{value}</Text>))} 
     </View>); 
}; 

}

使用它

<FilterNumbers numbers={[1, 2, 3, 4, 5]} filter={value => value % 2 === 1}/> 

附：

• 我使用數組進行簡單演示。您可以使用帶有JSON和調整邏輯的Array來適應它。
• 最好使用ListView來顯示可迭代的數據。