移动优先的 React 组件与 React Native 介绍
移动优先的 React 组件
在移动和桌面环境中,渲染项目列表是常见的 UI 元素。即使不借助 CSS 库,实现列表渲染也并非难事,但使用库有助于保持外观和感觉的一致性。下面我们将实现一个由一组过滤器控制的列表。
首先是渲染 react-bootstrap
组件的代码:
import React, { PropTypes } from 'react';
import { Map as ImmutableMap } from 'immutable';
import {
Button,
ButtonGroup,
ListGroupItem,
ListGroup,
Glyphicon,
} from 'react-bootstrap';
import './FilteredList.css';
// 实用函数,根据 "done" 值获取项目的 bootstrap 样式
const itemStyle = done =>
ImmutableMap()
.set(true, { bsStyle: 'success' })
.set(false, {})
.get(done);
// 实用组件,根据 "done" 值渲染 bootstrap 图标
const ItemIcon = ({ done }) =>
ImmutableMap()
.set(true, (
<Glyphicon
glyph="ok"