Question

我正在创建带有react-bootstrap的4列网格，并希望每个idx％4 == 0迭代呈现一个<Row>标签，每个idx％4 == 3呈现一个</Row>迭代

render(){

   {items.map( (item, idx) => (
       idx%4==0? <Row> : '' 

       <Col key={item} lg={3}>
            ....
       <Col>

       idx%4==3? </Row> : ''

    }
}

是否可以这样做？没有结束标记

，我似乎无法完全自己做一个开始标记

还是我应该一次切片4并尝试渲染它？

Answer 1

我认为您的想法正确。您可以通过使用索引检查&&而不是三元有条件地渲染来清理它-

{items.map( (item, idx) => (
   {idx % 4 == 0 && <Row>}

     <Col key={item} lg={3}>
        ....
     <Col>

   {idx % 4 == 3 && </Row>}
}

Answer 2

您应该尝试像这样组织语法和三元运算符，以便更好地了解正在发生的事情：

render(){
  {items.map((item, idx) => {
    return(
      idx % 4 == 0 ? (
        <Row>
          <Col>Hello</Col>
        </Row>
      ) : (
        idx % 4 == 3 ? (
          <Row>
            <Col>Different type of hello</Col>
          </Row>
        ) : (
          null
        )
      )
    )
  })}
}

这样，您的地图会更干净一些，生成完全不同的行，而不是尝试将所有内容嵌套在一个条件下。

Answer 3

是React，您应该渲染（或返回）完整的组件，但是您可以执行以下操作对组件进行分组，并返回由Row包裹的完整组：

    return (
      <>
        {items
          .reduce(
            (rows, key, index) =>
              (index % 3 === 0
                ? rows.push([key])
                : rows[rows.length - 1].push(key)) && rows,
            []
          )
          .map((items, idx) => (
            <Row key={idx}>
              {items.map(item => (
                <Col key={item} lg={3}>{item}</Col>
              ))}
            </Row>
          ))}
      </>
    );

reduce正在创建一个二维数组，每行三行。

工作示例

class App extends React.Component {
  render() {
    let myArr = [1, 2, 3, 4, 5, 6, 7, 8];
    return (
      <div>
        {myArr
          .reduce(
            (rows, key, index) =>
              (index % 3 === 0
                ? rows.push([key])
                : rows[rows.length - 1].push(key)) && rows,
            []
          )
          .map((items, idx) => console.log(items) || (
            <ol key={idx}>
              {items.map(item => console.log(item) || (
                <li key={item} lg={3}>{item}</li>
              ))}
            </ol>
          ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<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="root"></div>

Answer 4

您可以先创建{ "type": "node", "request": "launch", "name": "Launch Electron Shell", "cwd": "${workspaceFolder}/dist", "runtimeExecutable": "${workspaceFolder}/dist/node_modules/electron/dist/electron", "runtimeArgs": ["app.js", "--remote-debugging-port=9222"], "protocol": "inspector", "env": { "PATH": "/path/to/virtualenv/folder/bin:${env:PATH}", "PYTHONHOME": null } },数组，然后在第二次迭代中创建行

Col

React Bootstrap根据地图索引有条件地渲染

4 个答案: