Reactは無限ループスクロール情報を実装する

クラスRollはReact.Componentを拡張します{
  
  状態 = {
    リスト: [
      { タイトル: 「静かな夜の思い」 },
      { タイトル: '唐李白' },
      { タイトル: 「窓の前の明るい月明かり」 },
      { title: 「地面に霜が降りているようだ」 },
      { タイトル: 「明るい月を見上げて」 },
      { タイトル: 「故郷を見下ろしながら思いを馳せる」 },
    ]
  }

  コンポーネントWillMount = () => {
    この関数を開始します
  }

  ロール = () => {
    arr = this.state.list とします。
    arr.push(この状態リスト[0])
    配列連結(0,1)
    this.setState({
      リスト: arr,
    })
    console.log(この状態のリスト);
  }

  開始 = () => {
    this.timer = setInterval(() => {
      this.roll()
    }, 1000);
  }

  停止 = () => {
    クリア間隔(this.timer)
  }

  与える （） {
    戻る （
      <div onMouseEnter={this.stop} onMouseLeave={this.begin} className='box'>
        {this.state.list.map(item => {
          戻る （
            <p>
              {アイテムタイトル}
            </p>
          ）
        })}
      </div>
    ）
  }
}

クラスRollはReact.Componentを拡張します{

  状態 = {
    リスト: [
      { タイトル: 'これはメッセージ 1 です' },
      { タイトル: 'これはメッセージ 2 です' },
      { タイトル: 'これはメッセージ 3 です' },
      { タイトル: 'これはメッセージ 4 です' },
      { タイトル: 'これはメッセージ 5 です' },
      { タイトル: 'これはメッセージ6です' },
      { タイトル: 'これはメッセージ7です' },
      { タイトル: 'これはメッセージ8です' },
      { タイトル: 'これはメッセージ9です' },
    ]、
    カウント: 0,
  }

  // ページがマウントされたらタイマーを開始するcomponentDidMount = () => {
    この関数を開始します
  }

  // タイマー開始 = () => {
    this.timer = setInterval(() => {
      this.Roll()
    }, 10);
  }

  // タイマー停止をオフにする = () => {
    クリア間隔(this.timer)
  }

  // オフセットが 0.5px になるたびに、状態を使用してオフセットの数を保存します Roll = () => {
    this.setState({
      カウント: this.state.count+1
    })
    this.refs.roll.style.top = -0.5*this.state.count+'px';
    // オフセットが 40px に達したら、配列の最初のデータを配列の末尾まで切り取り、行の高さに対応するオフセットの数を減算します。if(-0.5*this.state.count <= -40){
      arr = this.state.list とします。
      arr.push(この状態リスト[0])
      配列をスプライスする(0,1);
      this.setState({
        リスト: arr,
        カウント: this.state.count - 50,
      })
      this.refs.roll.style.top = (this.state.count*(-0.5)) + 'px'
    }
    
  }

  与える（）{
    戻る （
      <div className="box" onMouseEnter={this.stop} onMouseLeave={this.begin}>
        <div className="content" ref='roll'>
          {this.state.list.map((item)=>{
            戻る （
              <p className='行'>
                <a href="#" rel="外部nofollow" >
                  {アイテムタイトル}
                </a>
              </p>
            ）
          })}
        </div>
      </div>
    ）
  }
}

。箱{
  幅: 300ピクセル;
  高さ: 160px;
  境界線: 1px 黒一色;
  マージン: 200px 300px;
  位置: 相対的;
  オーバーフロー: 非表示;
}

。コンテンツ{
  位置: 絶対;
  上: 0px;
}

。行{
  高さ: 20px;
  マージン: 5px 自動;
}

コンポーネントDidMount = () => {
        コンソールにログ出力します。
    }

    与える （） {
        戻る （
            <div ref='テスト'>
                123
            </div>
        ）
    }

コンポーネントDidMount = () => {
    console.log(ReactDom.findDOMNode(this));
  }

  与える （） {
    戻る （
      <div クラス名 = 'テスト'>
        123
      </div>
    ）
  }