javascript - 如何将 props 和 function 传递给 react-widow 列表?
问题描述
这是react-window
插件:https ://github.com/bvaughn/react-window
我正在使用它来呈现“行”的简单列表。
这是Row
我尝试传递函数和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
应该将函数和一个道具传递给comp的Row
comp:
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
解决方案
我从未使用过 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"));
推荐阅读
- c# - 如何在 Linux 平台上使用 C# 和 .Net 核心以编程方式创建符号链接
- asp.net-core - 使用 Ajax 将数据发送到 asp core 中的控制器
- c++ - 使用 net-snmp lib 接收 SNMP V3 陷阱的 C++ 源代码
- google-sheets - 如何将 2 个选项卡合并为 1 个结果?(谷歌表)
- python - Concatenate Excel files
- regex - nginx block POST /adm/ for all except one ip
- c# - How can I get cents from Decimal
- powershell - 具有多个路径的 Get-ChildItem - 如果目录丢失,则会出错
- c# - C# stream Deserialize way to loop?
- python - Python TypeError: list indices must be integers or slices, not tuple. Caesar Cypher Decoder