Reactのコンポーネントが干渉する

###追記
クリップありがとうございます。
この質問がオープンな間は私はまだこの問題を解決していないので、お気軽に回答していただければ嬉しいです。
よろしくお願いいたします。

#やりたいこと
Airbnbのサイトのように、縦方向、横方向に無限スクロールさせたいです。

#発生した問題
親コンポーネント(縦方向)と子コンポーネント(横方向)の両方に無限スクロールを適用させたところ、子コンポーネントをスクロールしても読み込みが発生せず、親コンポーネントでスクロールして読み込んだ分、子コンポーネントでもスクロールができる状態になってしまいました。

なお、親コンポーネントを無限スクロールさせない場合は、子コンポーネント(横方向)が無限スクロールできることは確認できました。

#やってみたこと
無限スクロールを実現するために、react-infinite-scroll-componentというコンポーネントを使用しました。

書いてみたコードは以下の通りです。

html
1<!-- index.html -->
2
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>Sample</title>
7    <style>
8      body {
9        font-family: Circular, "Helvetica Neue", Helvetica, Arial, sans-serif !important
10      }
11    </style>
12  </head>
13  <body>
14    <div id="app"></div>
15    <script src="bundle.min.js"></script>
16  </body>
17</html>

javascript
1// index.js
2
3import React from "react"
4import ReactDOM from "react-dom"
5import Home from './components/Home'
6
7const app = document.getElementById('app')
8ReactDOM.render(<Home/>, app)

javascript
1// home.js
2
3import React from 'react'
4import styled from 'styled-components'
5import InfiniteScroll from 'react-infinite-scroll-component'
6import HorizontalScroll from './Home/HorizontalScroll'
7
8export default class Home extends React.Component {
9  constructor () {
10    super()
11    this.state = {
12      items: Array.from({ length: 1 })
13    }
14  }
15
16  componentDidUpdate () {
17    console.log(`Home state: ${this.state.items.length}`)
18  }
19
20  fetchMoreData = () => {
21    this.setState({
22      items: this.state.items.concat(Array.from({ length: 1 }))
23    })
24  }
25
26  render = () => (
27    <div>
28      <Title>Infinity Test</Title>
29      <hr/>
30      <HorizontalScroll />
31      <InfiniteScroll
32        dataLength={this.state.items.length}
33        next={this.fetchMoreData}
34        hasMore={true}
35      >
36        {this.state.items.map((i, index) =>
37          <Tile key={index}>
38            #{index}
39          </Tile>
40        )}
41      </InfiniteScroll>
42    </div>
43  )
44}
45
46const Title = styled.h1`
47  text-align: center;
48  color: dimgray;
49`
50const Tile = styled.div`
51  width: 90%;
52  height: 80px;
53  margin: 10px auto;
54  background-color: pink;
55`

javascript
1// HorizontalScroll.js
2
3import React from 'react'
4import styled from 'styled-components'
5import HorizontalInfiniteScroll from 'react-infinite-scroll-component'
6
7export default class HorisontalScroll extends React.Component {
8  constructor () {
9    super()
10    this.state = {
11      horizontalItems: Array.from({ length: 1 })
12    }
13  }
14
15  componentDidUpdate () {
16    console.log(`HorizontalScroll state: ${this.state.horizontalItems.length}`)
17  }
18
19  fetchMoreDataHorizontal = () => {
20    this.setState({
21      horizontalItems: this.state.horizontalItems.concat(Array.from({ length: 1 }))
22    })
23  }
24
25  render () {
26    return (
27      <div>
28        <HorizontalInfiniteScroll
29          dataLength={this.state.horizontalItems.length}
30          next={this.fetchMoreDataHorizontal}
31          hasMore={true}
32        >
33          <HorisontalScrollBox>
34            {this.state.horizontalItems.map((i, index) =>
35              <Tile key={index}>
36                #{index}
37              </Tile>
38            )}
39          </HorisontalScrollBox>
40        </HorizontalInfiniteScroll>
41      </div>
42    )
43  }
44}
45
46const HorisontalScrollBox = styled.ul`
47  overflow-x: auto;
48  white-space: nowrap;
49  -webkit-overflow-scrolling: touch;
50`
51const Tile = styled.li`
52  display: inline-block;
53  width: 180px;
54  height: 300px;
55  margin: 30px;
56  background-color: dodgerblue;
57`

stateやプロパティの名前が同じだといけないのかと思い、変数名を違うものにしてみましたが、変化はありませんでした。

また、componentDidUpdate()で各コンポーネントの状態を確認したところ、以下のように親コンポーネントで読み込みが発生したときのみ、子コンポーネントで2回読み込みが発生していることは確認できましたが、理由が全くわかりません。

console
1[Log] HorizontalScroll state: 2
2[Log] HorizontalScroll state: 2
3[Log] Home state: 2
4[Log] HorizontalScroll state: 3
5[Log] HorizontalScroll state: 3
6[Log] Home state: 3
7[Log] HorizontalScroll state: 4
8[Log] HorizontalScroll state: 4
9[Log] Home state: 4
10         :
11         :

公式のレファレンスも読んでみましたが、縦スクロールのサンプルしかなく自分の力では解決できない状態です。どうかよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

ご利用になられている無限スクロール用のコンポーネントですが、ソースコード内に、横スクロール量を取得する scrollLeftプロパティがどこにも見当たらないため（縦スクロール検知のための scrollTop は見つかります）、横スクロールでの無限スクロールは不可能だと思われます。

また issue に横方向のスクロールをサポートしてほしいという要望は上がっていますが、特に進展があるようには見えません。

なお、親コンポーネントを無限スクロールさせない場合は、子コンポーネント(横方向)が無限スクロールできることは確認できました。

上下に少しでもスクロールすると fetchMoreDataHorizontal が呼び出されますので、横方向への無限スクロールができるようにみえるのはそれが原因ではないでしょうか。一度上下に少しスクロールして横方向へのスクロールバーを表示させ、そのスクロールバーをつかんで動かしても無限スクロールされることはありませんでした。

投稿2019/06/10 06:22