0

我需要知道是否可以使用 react-window 来显示项目列表，并在同一行显示带有每个操作的按钮。如果是，请给我一个关于如何做的提示。

import React from "react";

import { FixedSizeList as List } from "react-window";

const ListBebes = ({
  bebes,
  handleItemClick,
  handleEditClick,
  handleDeleteClick,
}) => {
  const Row = ({ index, style }) => (
    <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
      {bebes[index].nombres}
    </div>
  );
  return (
    <List
      className="List"
      height={5}
      itemCount={bebes.length}
      itemSize={35}
      width={300}
    >
      Row
    </List>
  );
};

export default ListBebes;

<Col xs="4">
  {this.state.is_fetching ? (
    "Loading..."
  ) : (
    <ListBebes
      bebes={this.state.bebes}
      handleItemClick={(id) => this.handleItemClick(id)}
      handleEditClick={(id) => this.handleEditClick(id)}
      handleDeleteClick={(id) => this.handleDeleteClick(id)}
    ></ListBebes>
  )}
</Col>;

4

1 回答 1

0

在 Row 函数中添加你想要的东西

const Row = ({ index, style }) => (
   <div>
      <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
        {bebes[index].nombres}
      </div>
      <button>Your Button Here!</button>
   </div> 
);

或者只是导入一个新组件，也许<YourItemComponent />并在 Row 中返回它，你可以在你的新组件中做你想做的事情，就像你的其他组件一样

const Row = ({index, style}) => (<YourItemComponent index={index} style={style}/>);

对不起我糟糕的英语，希望你能理解

于 2021-08-02T13:14:51.540 回答