代码之家 › 专栏 › 技术社区 › Ricky

React.js公司使用映射时创建新行

jsx reactjs javascript

Ricky · 技术社区 · 6 年前

{index % 4===0 && </div><div className="row">}

0 回复 | 直到 6 年前

Nithish 6 年前

你可以试试这个


const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
const componentArray = [];

export default function App() {
  const formComponents = () => {
    data.forEach((d, i) => {
      let index = Math.floor(i / 4);
      componentArray[index] = [
        ...(componentArray[index] || []),
        <span key={d}>{d}</span>
      ];
    });
    console.log(componentArray);
    return componentArray;
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {/* <NewDevicePage /> */}
      {formComponents().map((comp, i) => (
        <div key={i}>{comp}</div>
      ))}
    </div>
  );
}

Siddharth 6 年前

创建列元素数组,

[<tr>{[<td>1</td>, <td>2</td>, <td>3</td>, <td>4</td>]}</tr>];

可以直接渲染此数组。

供参考- https://reactjs.org/docs/lists-and-keys.html

const Arr = [
  { name: "abc" },
  { name: "def" },
  { name: "ghi" },
  { name: "jkl" },
  { name: "mno" },
  { name: "pqr" }
];

function App() {
  const rows = [];
  let columns = [];
  Arr.forEach((data, index) => {
    if (index % 4 === 0) {
      rows.push(<tr>{columns}</tr>);
      columns = [];
    }
    columns.push(<td>{data.name}</td>);
  });

  // to push the remaining columns
  if(columns.length){
      rows.push(<tr>{columns}</tr>);
  }

  return <table>{rows}</table>;
}

codingwithmanny 6 年前

做了一些类似的事情,但是如果你只是想控制外观的列数,你可以在技术上忽略这一点,只使用CSS来显示你想要的。此处引用: https://stackoverflow.com/a/45384426/11317072

点击看看它是怎么工作的。

// main.js

const App = () => {
  const myData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
  
  const retrievRowsByColNum = (data, colPerRow) => {
    const rows = [];
    let cols = [];
    for (let i = 0; i < data.length; i++) {
      cols.push(data[i]);
      if ((i + 1) % (colPerRow) === 0) {
        rows.push(cols);
        cols = [];
      }
    }
    if (cols && cols.length > 0) {
      rows.push(cols);
    }
    return rows;
  };
  
  return (<div>{(retrievRowsByColNum(myData, 4)).map((i, k) => i && i.length > 0 && <div key={`row-${k}`}>{i.map((c, ck) => <div key={`key-${ck}`}>col {c}</div>)}<br/></div>)}</div>);
}

ReactDOM.render(<App />, document.querySelector('#root'));

<body>
<div id="root"></div>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script type="text/babel" src="main.js"></script>
</body>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前