React 30 秒速学:把数组数据渲染为列表、表格

本文译自:30-seconds-of-react。React 30 秒速学:全篇中文翻译、学习,地址:30-seconds-of-react-zh_CN-umi,所有案例进行分析、注释、上线。

这里学习第一节,Array,即把数组数据渲染为列表、表格。

DataList渲染为列表

通过数组渲染元素列表。

  • 使用 isOrdered prop 的值有条件地渲染
        列表。
      • 使用Array.prototype.mapdata中的每个项目渲染为
      • 元素,给它一个由其索引和值的串联产生的key
      • 默认情况下,省略 isOrdered prop 以渲染
          列表。
        function DataList({ isOrdered, data }) {
          const list = data.map((val, i) => 
      • {val}
      • ); return isOrdered ?
          {list}
        :
          {list}
        ; } 复制代码
        例子
        export default function() {
          const names = ['John', 'Paul', 'Mary'];
          return (
            
        无序列表: 有序列表:
        ); } 复制代码

        ps:

        • 示例代码
        • 运行效果

        DataTable渲染为表格

        通过数组渲染表格,动态创建每一行。

        *渲染一个带有两列(IDValue)的

        元素。 *使用Array.prototype.mapdata中的每个项目渲染为元素,由其索引和值组成,给它一个由两者串联产生的key

        function DataTable({ data }) {
          return (
            <table>
              <thead>
                <tr>
                  <th>IDth>
                  <th>Valueth>
                tr>
              thead>
              <tbody>
                {data.map((val, i) => (
                  <tr key={`${i}_${val}`}>
                    <td>{i}td>
                    <td>{val}td>
                  tr>
                ))}
              tbody>
            table>
          );
        }
        复制代码
        例子
        export default function() {
          const people = ['John', 'Jesse'];
          return <DataTable data={people} />;
        }
        复制代码

        ps:

        • 示例代码
        • 运行效果

        MappedTable渲染为映射表格

        通过对象数组渲染表格,属性名称与列对应,动态创建每一行。

        • 使用Object.keys()Array.prototype.filter()Array.prototype.includes()Array.prototype.reduce()生成一个filteredData数组,包含所有对象 使用propertyNames中指定的键。
        • 渲染一个
        元素,其中一组列等于propertyNames中的值。
      • 使用Array.prototype.mappropertyNames数组中的每个值渲染为
      • 元素,对象中的每个键包含一个
        元素。
      • 使用Array.prototype.mapfilteredData数组中的每个对象渲染为
      • function MappedTable({ data, propertyNames }) {
          let filteredData = data.map(v =>
            Object.keys(v)
              .filter(k => propertyNames.includes(k))
              // 迭代为 acc 对象赋值:
              // 回调函数为 (acc, key) => ((acc[key] = v[key]), acc) 初始值为 {}
              // ((操作), 返回值) 语法解读:括号里进行任意操作,并指定返回值
              .reduce(( acc, key) => ((acc[key] = v[key]), acc), {}),
          );
          return (
            <table>
              <thead>
                <tr>
                  {propertyNames.map(val => (
                    <th key={`h_${val}`}>{val}th>
                  ))}
                tr>
              thead>
              <tbody>
                {filteredData.map((val, i) => (
                  <tr key={`i_${i}`}>
                    {propertyNames.map(p => (
                      <td key={`i_${i}_${p}`}>{val[p]}td>
                    ))}
                  tr>
                ))}
              tbody>
            table>
          );
        }
        复制代码

        Notes

        此组件不适用于嵌套对象,如果在propertyNames中指定的任何属性中有嵌套对象,则会中断。

        例子
        export default function() {
          const people = [
            { name: 'John', surname: 'Smith', age: 42 },
            { name: 'Adam', surname: 'Smith', gender: 'male' },
          ];
          const propertyNames = ['name', 'surname', 'age'];
          return <MappedTable data={people} propertyNames={propertyNames} />;
        }
        复制代码

        ps:

        • 示例代码
        • 运行效果

        你可能感兴趣的:(React 30 秒速学:把数组数据渲染为列表、表格)