slimscrollをreactJSに追加する

SlimscrollをReactJSアプリケーションに追加しようとしていますが、ブラウザのdevツールにスクロールバーが表示されていますが、コンソールにエラーが表示されUIが壊れています。 sidenoteとして、アプリは正常にコンパイルされます。slimscrollをreactJSに追加する

これは私のApp.js index.htmlで次に

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import { connect } from 'react-redux'; 
import classnames from 'classnames'; 
import 'jquery-slimscroll/jquery.slimscroll.min'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 


class App extends Component { 
    componentDidMount() { 
     $(".scroll").slimscroll({ 
      height: '100%' 
     }); 
    } 
    render() { 
     <MuiThemeProvider muiTheme={getMuiTheme(materialUITheme)}> 
      <div id="app-inner"> 
       ....blah blah blah.... 
      </div> 
     </MuiThemeProvider> 
    }; 
} 

module.exports = App;

である私は、テーブルやリストをスクロールするようなオーバーフローと他の場所でこれを使用する予定<body>

にscrollクラスを追加し、だから私はむしろ、私は再利用できるユーティリティクラス（すなわちスクロール）に接続されたスリムスクロール機能を持っているだろう

以下に見られるように、スリムスクロールはDOM

しかし、UIブレークReactJSは、私はいくつかの方法で使用される方法が好きではありませんので。（すなわち、メニュー、部分的にページが表示され、など）

を働いていないものの

多くは、どのように私はReactJSにslimscrollを追加することができます。私はnpmで反応スクロールバーを見ましたが、それは<ScrollBar></ScrollBar>に要素をラップする必要があり、私は体にそれを行うことはできません

出典

2017-05-14 LOTUSMS

これはあなたの質問に直接答えではないかもしれません。しかし、それはあなたの元の問題を解決します。 IMO ReactでjQueryプラグインを使うのは良い考えではありません。しかし、本体にスクロールを追加することとの視覚的な相違なしにreact-scrollbarをメインコンテナとして使用することができます。ここに小さな例があります。

import React from 'react'; 
import { render } from 'react-dom'; 
import { Scrollbars } from 'react-custom-scrollbars'; 

const App =() => (
    <Scrollbars style={{ height: "100vh" }}> 
    <div style={{height:"2000px"}}/> 
    </Scrollbars> 
); 

render(<App />, document.getElementById('root'));

また、HTMLと本文に余白がないことを確認してください。

html, body{ 
    margin: 0px; 
}

実施例：https://codesandbox.io/s/orLx4ZlL

出典

2017-05-14 15:01:16

私も反応するとjqueryのを使用して反対です。私は反応スクロールバーを前に調べましたが、あなたの例が示唆したように、私はタグで私の体を包んでいなければならず、私の体はコンポーネントの外にあり、HTMLの中に直接あります。実際には、私はコンポーネント内の身体と反応するアプリを見たことがないと思います。 – LOTUSMS

@LOTUSMSあなたはそれが何を意味するかはっきりしていません。私の例では、 'body'はまだ' html'タグの中にあり、私のすべての反応コンポーネントは 'body'の内部にあります。 –

私は反応スクロールバーを実装すると、本体のスクロールバーが保持され、スクロールバーの2つのセットを取得します。 1つは本体からのもので、もう1つはの中に包まれたコンテナからのものです。体が溢れるのを隠すと、オーバーフローがその内部に止まります。次に、スクロールバーをボディーワークの内側に作成する唯一の方法は、固定された高さを与えることです。意味はバイバイ高さ100％。あまりにもバギーです。より単純な方法が必要です – LOTUSMS

slimscrollをreactJSに追加する

答えて

関連する問題