通过在 JS 中按索引范围对数组进行分组来创建 React 组件答案

【问题标题】：Create a React componenent by grouping an array by index range in JS通过在 JS 中按索引范围对数组进行分组来创建 React 组件
【发布时间】：2021-12-11 02:13:14
【问题描述】：

假设我有一个这样的数组：

const a = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17, 18, 19];

我想返回一个包含 a 值的反应组件，将它们分成 10 个元素的组。所以预期的输出是：

<MyReactBox>
   <span>The first ten</span>
   <span>0, 1, 2, 3, 4, 5, 6, 7, 8, 9</span>
   <span>The last ten</span>
   <span>10, 11, 12, 13, 14, 15, 16, 17, 18, 19</span>
</MyReactBox>

最好的方法是什么？

【问题讨论】：

标签： javascript arrays reactjs dictionary ecmascript-6

【解决方案1】：

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const getCustom = (rangeFirst, rangeLast) => {
    return(
  <div>
     <span>The first ten</span>
     <span>{rangeFirst}</span>
     <span>The last ten</span>
     <span>{rangeLast}</span>
  </div>
  );};
  const a = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17, 18, 19];
    return (
     <div>
     <span>{getCustom(a.slice(0,10).join(", "), a.slice(-10).join(", "))}</span>
    
   </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

在这里，用你的组件替换它-

<div>
     <span>The first ten</span>
     <span>{rangeFirst}</span>
     <span>The last ten</span>
     <span>{rangeLast}</span>
  </div>

【讨论】：

【解决方案2】：

一种方法是使用slice 和Array.from 方法根据数组大小动态构建。这应该适用于任何大小的数组。（只需更新标签数组以自定义标题）

const a = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17, 18, 19];

const labels = ['first', 'second', 'third', 'fourth']

const Component = () => {
  const len = Math.ceil(a.length / 10);
  return (
    <div>
      {Array.from({ length: len }, (_, idx) => (
        <div key={`The ${(idx+1) === len ? 'last' : labels[idx] || idx} Ten : `}>
          <span>{`The ${(idx+1) === len ? 'last' : labels[idx]} Ten : `}</span>
          <span>{a.slice(idx * 10, idx * 10 + 10).join(', ')}</span>
        </div>
      ))}
    </div>
  );
};

ReactDOM.render(<Component />, document.getElementById("app"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="app"></div>

【讨论】：

【解决方案3】：

const Component = () => {
  const a = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17, 18, 19];
  const labels = ['first', 'last'];
  const n = 10;

  return (
    <MyReactBox>
      {labels.map((label, index) => {
        return (
          <>
            <span>The {label} ten</span>
            <span>
              {a.slice(index*n, index*n+n).map((number, numberIndex) => {
                if (numberIndex !== 0) return `, ${number}`;
                return number;
              })}
            </span>
          </>
         )
      })}
    </MyReactBox>
  )

}

【讨论】：