可以使用react-window来显示带有按钮的项目列表吗？

Question

我需要知道是否可以使用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>;

​

Answer 1

在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 />，然后在行中返回它，您可以像其他组件一样在新组件中执行您想要的操作

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

很抱歉我的英语很差，希望你能理解