web-dev-qa-db-ja.com

（react-window）<fixedSizeList> {row} </ fixedSizeList>の{行}に小道具を渡す方法

私は呼び出されたライブラリを使っています react-window

このような小道具をその行に渡すとき：

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

それは私に誤りを与えました：

React.CreateElement：Typeは無効です - 文字列（組み込みコンポーネントの場合）またはクラス/関数（コンポジットコンポーネント用）が予想されますが、.

それをする正しい方法はどうですか？

reactjsreact-propsreact-window
11
Bens

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関数：

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

これがデモです. https：//codesand.io/s/bvaughnreact-window-fixed-size-list-vertical-tqdpf

0
Pearce

私はこれが非常に混乱しているが、ここに私のコードがあります（それが役立つことを望む）：

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)
 _
0
Kyle Pennell