Question

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

当我像这样将道具传递到它的行时：

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

它给了我类似的错误：

React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（用于复合组件）但是得到了... ...

正确的方法是什么？

Answer 1

将道具添加到父元素的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组件中，您可以从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

Answer 2

您可以让&Test->data返回一个函数。您可以从函数定义中访问两个参数。因此，您可以将数据直接传递到Row调用中。

Row()

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

Row

这是一个演示：https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-tqdpf

Answer 3

我发现这非常令人困惑，但这是我的代码（希望它可以提供帮助）：

class Row extends PureComponent {
  render() {
    const { data, index, style } = this.props
    const {
      classes,
      itemsPerRow,
      shows,
      setCardMarkerHover,
      resetCardMarkerHover,
      playTrack,
    } = data

    const items = []
    const fromIndex = index * itemsPerRow
    const toIndex = Math.min(fromIndex + itemsPerRow, shows.length)

    //console.log(this.props)

    for (let i = fromIndex; i < toIndex; i++) {
      items.push(
        <ShowCard
          key={i}
          item={shows[i]}
          setCardMarkerHover={setCardMarkerHover}
          resetCardMarkerHover={resetCardMarkerHover}
          playTrack={playTrack}
        />
      )
    }

    //  console.log(items)

    return (
      <div className={classes.Row} style={style}>
        {items}
      </div>
    )
  }
}

class FastList extends React.Component {
  getItemData = memoize(
    (
      classes,
      itemsPerRow,
      shows,
      setCardMarkerHover,
      resetCardMarkerHover,
      playTrack
    ) => ({
      classes,
      itemsPerRow,
      shows,
      setCardMarkerHover,
      resetCardMarkerHover,
      playTrack,
    })
  )

  render() {
    const {
      shows,
      classes,
      setCardMarkerHover,
      resetCardMarkerHover,
      playTrack,
    } = this.props

    //console.log(this.props)

    // console.log(shows);

    return (
      <div style={{ height: "90vh", minWidth: "20vw" }}>
        <AutoSizer>
          {({ height, width }) => {
            const itemsPerRow = 1

            const rowCount = Math.ceil(shows.length / itemsPerRow)
            const itemData = this.getItemData(
              classes,
              itemsPerRow,
              shows,
              setCardMarkerHover,
              resetCardMarkerHover,
              playTrack
            )

            return (
              <div>
                <List
                  height={height}
                  itemCount={rowCount}
                  itemData={itemData}
                  itemSize={CARD_SIZE}
                  width={width}
                >
                  {Row}
                </List>
              </div>
            )
          }}
        </AutoSizer>
      </div>
    )
  }
}

FastList.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(FastList)

Answer 4

这也有效：

  <List
    ...
  >
    {(props) => Row({...props, yourCustomProp})}
  </List>

像这样在 Row 中使用：

const Row = props => {
  console.log(props.yourCustomProp);
  return (
    <div>
      ...
    </div>
  );
};

（反应窗口）如何将道具传递到<FixedSizeList> {Row} </FixedSizeList>

4 个答案: