如何将 props 和 function 传递给 react-widow 列表？答案

【问题标题】：How to pass props and function to the react-widow list?如何将 props 和 function 传递给 react-widow 列表？
【发布时间】：2019-12-21 22:16:21
【问题描述】：

这是react-window 插件：https://github.com/bvaughn/react-window

我正在使用它来呈现“行”的简单列表。

这是Row comp，我在其中尝试传递函数和const idTestProps=''

class Row extends PureComponent {
  render() {
    const { index, style } = this.props;
    let label;
    if (itemStatusMap[index] === LOADED) {
      label = `Row ${index}`;
    } else {
      label = "Loading...";
    }
    return (
      <div className="ListItem" style={style}>
        {label}
      </div>
    );
  }
}

这是Container 组合，应该将函数和一个道具传递给Row 组合：

const outerElementType = forwardRef((props, ref) => (
  <div ref={ref} onClick={handleClick} {...props} />
));

export default function App() {
  return (
    <Fragment>
      <InfiniteLoader
        isItemLoaded={isItemLoaded}
        itemCount={1000}
        loadMoreItems={loadMoreItems}
      >
        {({ onItemsRendered, ref }) => (
          <List
            className="List"
            height={150}
            itemCount={1000}
            itemSize={35}
// This is outerElementType is way to pass some function down to Row
            outerElementType={outerElementType} 
            width={300}
          >
            {Row}
          </List>
        )}
    </Fragment>
  );

我成功通过了“函数”并且可以工作，但 property 没有。

如何将道具与功能同时传递？

这是codesandbox 示例： https://codesandbox.io/s/4zqx79nww0

【问题讨论】：

你想将道具传递给Row en App吗？
是的，正确的......
@MarkJames 你是怎么解决这个问题的？

标签： javascript reactjs typescript frontend

【解决方案1】：

我从未使用过 react-window 但也许你可以这样做：

import React, { forwardRef } from "react";
import ReactDOM from "react-dom";
import { FixedSizeList as List } from "react-window";

import "./styles.css";

const Row = props => ({ index, style }) => (
  <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
    Row {index} {props.test}
  </div>
);

function handleOnWheel({ deltaY }) {
  // Your handler goes here ...
  console.log("handleOnWheel()", deltaY);
}

const outerElementType = forwardRef((props, ref) => (
  <div ref={ref} onWheel={handleOnWheel} {...props} />
));

const Example = () => (
  <List
    className="List"
    height={150}
    itemCount={1000}
    itemSize={35}
    outerElementType={outerElementType}
    width={300}
  >
    {Row({ test: "test" })}
  </List>
);

ReactDOM.render(<Example />, document.getElementById("root"));

【讨论】：