reactjs - (react-window) 如何将 props 传递给 {Row} 中的 {Row}

Question

我正在使用名为 react-window 的库

当我像这样将 Prop 传递到其行时:

{Row({...props, {otherProps}})}

它给了我一个类似的错误:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: ...

正确的做法是怎样的？

Answer 1

您将 props 添加到父元素的 data 属性。注意itemData={{ testData: "123", otherData: true }}。

const Example = () => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
        itemData={{ testData: "123", otherData: true }}
      >
        {Row}
      </List>
    )}
  </AutoSizer>
);

然后在 Row 组件中，您可以从像这样的 props 获取数据 const { data, index, style } = props;

const Row = props => {
  const { data, index, style } = props;
  return (
    <div>
      {index} Row {data.testData}
    </div>
  );
};

演示以查看其实际效果:https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-dtnre