主页 / 问题 / 947126
Accepted
stiv
Asked:2020-02-20 19:39:33 +0000 UTC2020-02-20 19:39:33 +0000 UTC

如何在多行中显示数据

  • 772

有这样的输入：

const toothData = [
    //1row topleft
    {
        id: 11,
    },
    {
        id: 12,
    },
    {
        id: 13,
    },
    {
        id: 14,
    },
    {
        id: 15,
    },
    {
        id: 16,
    },
    {
        id: 17,
    },
    {
        id: 18,
    },
    // 2row topright
    {
        id: 21,
    },
    {
        id: 22,
    },
    {
        id: 23,
    },
    {
        id: 24,
    },
    {
        id: 25,
    },
    {
        id: 26,
    },
    {
        id: 27,
    },
    {
        id: 28,
    },
    // 3row bottom-left
    {
        id: 31,
    },
    {
        id: 32,
    },
    {
        id: 33,
    },
    {
        id: 34,
    },
    {
        id: 35,
    },
    {
        id: 36,
    },
    {
        id: 37,
    },
    {
        id: 38,
    },
    // 4row bottom-right
    {
        id: 41,
    },
    {
        id: 42,
    },
    {
        id: 43,
    },
    {
        id: 44,
    },
    {
        id: 45,
    },
    {
        id: 46,
    },
    {
        id: 47,
    },
    {
        id: 48,
    },

]

然后将其输出到这样的模板

class ToothList extends React.Component {
    render() {
        const toothTemplate = this.props.data.map(function (item, index) {
            return (
                <div className="tooth-item" key={index}>
                    <IconTooth/>
                    <span>
                        {item.id}
                    </span>
                </div>
            )
        })

        return (
            <div className="tooth-list">
                {toothTemplate}
            </div>
        )
    }
}

如何显示这个包含在一个块中的 8 个项目的数组（它会变成 4 行）？

javascript

2 个回答

  1. 作为一个选项 - 您可以在每八个元素之后添加一个换行符，或者您想要的任何内容而不是 br ： 

         class ToothList extends React.Component {
        render() {
            const toothTemplate = this.props.data.map(function (item, index) {
                return (
                 <React.Fragment>
                    <div className="tooth-item" key={index}>
                        <IconTooth/>
                        <span>
                            {item.id}
                        </span>
                    </div>
                {index%8===7 ? (<br/>) : null}
                </React.Fragment>)
                })
            return (

                <div className="tooth-list">
                    {toothTemplate}
                </div>             
            )
        }
    }
    • 1
  2. Best Answer

    const toothData = [
  //1row topleft
  {
    id: 11
  },
  {
    id: 12
  },
  {
    id: 13
  },
  {
    id: 14
  },
  {
    id: 15
  },
  {
    id: 16
  },
  {
    id: 17
  },
  {
    id: 18
  },
  // 2row topright
  {
    id: 21
  },
  {
    id: 22
  },
  {
    id: 23
  },
  {
    id: 24
  },
  {
    id: 25
  },
  {
    id: 26
  },
  {
    id: 27
  },
  {
    id: 28
  },
  // 3row bottom-left
  {
    id: 31
  },
  {
    id: 32
  },
  {
    id: 33
  },
  {
    id: 34
  },
  {
    id: 35
  },
  {
    id: 36
  },
  {
    id: 37
  },
  {
    id: 38
  },
  // 4row bottom-right
  {
    id: 41
  },
  {
    id: 42
  },
  {
    id: 43
  },
  {
    id: 44
  },
  {
    id: 45
  },
  {
    id: 46
  },
  {
    id: 47
  },
  {
    id: 48
  }
];

class ToothList extends React.Component {
  render() {
    const { data } = this.props;
    const rows = data.reduce(
      (prev, el, i) => {
        const subIdx = Math.floor(i / 8);
        prev[subIdx] = [...(prev[subIdx] || []), el];
        return prev;
      },
      []
    );
    return (
      <div className="tooth-list">
        {rows.map((row, i) => (
          <div key={`row-${i}`} className="tooth-row">
            {row.map((item, k) => (
              <div className="tooth-item" key={`row-item-${k}`}>
                {/* <IconTooth/> */}
                <span>{item.id}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return <ToothList data={toothData} />;
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
    .tooth-row {
  display: flex;
  margin: 1em;
  border-radius: 5px;
  background-color: lightskyblue;
}

.tooth-row > .tooth-item {
  margin: 0.5em;
  padding: 0.5em;
  border-radius: 5px;
  background-color: lavender;
}
    <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>

    • 1

相关问题