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来显示可迭代的数据。