14、移动优先的 React 组件与 React Native 介绍

移动优先的 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"