スクロールが機能していない：反応グリッドレイアウト：0-ショーケースの例

Question

react-grid-layoutの0-showcaseの例を複製しようとしていますが、グリッドとそのコンポーネントを含むメインのHTML要素はisn 'スクロール可能。私はオーバーフローyのスクロールに本文と後続の要素を与えようとしましたが、役に立たなかった。私はGastsby Static Site Generatorを使用して開発をスピードアップしています。そこで私のページのGastbyフォルダ構造の中に直接、grid.jsファイルを作成しました。このファイルには次の反応コードが含まれています。ほぼすべてがexample code hereに定義されています。これは私が得ていない小さなCSSの修正かもしれませんが、私は実際に私がここで欠けているものを理解していません。前もって感謝します！

import React, {PropTypes} from 'react' 
import {Responsive, WidthProvider} from 'react-grid-layout'; 
import lomap from 'lodash.map' 
import loresult from 'lodash.result' 
import lorange from 'lodash.range' 
import lorandom from 'lodash.random' 

import "../node_modules/react-grid-layout/css/styles.css" 
import "../node_modules/react-resizable/css/styles.css" 

const ResponsiveReactGridLayout = WidthProvider(Responsive) 

// const originalLayouts = getFromLS('layouts') || {} 

function generateLayout() { 
    return lomap(lorange(0, 25), function (item, i) { 
    var y = Math.ceil(Math.random() * 4) + 1; 
    return { 
     x: lorandom(0, 5) * 2 % 12, 
     y: Math.floor(i/6) * y, 
     w: 2, 
     h: y, 
     i: i.toString(), 
     static: Math.random() < 0.05 
    }; 
    }); 
} 

export default class MyLayout extends React.Component { 

    // static propTypes = { 
    // onLayoutChange: PropTypes.func.isRequired 
    // } 

    static defaultProps = { 
    className: "layout", 
    rowHeight: 30, 
    cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}, 
    initialLayout: generateLayout() 
    } 

    state = { 
    currentBreakPoint: 'lg', 
    mounted: false, 
    layouts: {lg: this.props.initialLayout} 
    } 

    constructor(props, context){ 
    super(props, context) 
    } 

    componentDidMount() { 
    this.setState({ 
     mounted: true 
    }) 
    } 

    generateDOM() { 

    const styles = { 
     background: "#eee" 
    } 

    return lomap(this.state.layouts.lg, (l, i) => { 
     return (
     <div style={styles} key={i} className={l.static ? 'static': ''}> 
      { 
      l.static ? 
       <span className="text" title="This item is static and can't be removed or resized"> 
       static - {i} 
       </span> : 
       <span className="text">{i}</span> 
      } 
     </div> 
    ) 
    }) 
    } 

    onBreakPointChange(breakpoint) { 
    this.setState({ 
     currentBreakPoint: breakpoint 
    }) 
    } 

    onLayoutChange(layout, layouts) { 
    // this.props.onLayoutChange(layout, layouts) 
    console.log(layout, layouts); 
    } 

    onNewLayout() { 
    this.setState({ 
     layouts: { 
     lg: generateLayout() 
     } 
    }) 
    } 

    render() { 
    return (
     <div> 
     <div>Current Breakpoint: {this.state.currentBreakpoint} ({this.props.cols[this.state.currentBreakpoint]} columns) 
     </div> 
     <button onClick={this.onNewLayout}>Generate New Layout</button> 
     <ResponsiveReactGridLayout 
      {...this.props} 
      layouts={this.state.layouts} 
      onBreakpointChange={this.onBreakpointChange} 
      onLayoutChange={this.onLayoutChange} 
      // WidthProvider option 
      measureBeforeMount={false} 
      // I like to have it animate on mount. If you don't, delete `useCSSTransforms` (it's default `true`) 
      // and set `measureBeforeMount={true}`. 
      useCSSTransforms={this.state.mounted}> 
      {this.generateDOM()} 
     </ResponsiveReactGridLayout> 
     </div> 
    ) 
    } 
} 

Answer 1

これは非常にばかげた質問でした。私はちょうど

body { 
    overflow: auto 
} 

を行うと、これは私のために動作しません、私の反応グリッド・レイアウト・コンポーネントに

render() { 
    const styles = { 
     height: "100vh" // just this! 
    } 
    return (
     <div> 
     <div>Current Breakpoint: {this.state.currentBreakpoint} ({this.props.cols[this.state.currentBreakpoint]} columns) 
     </div> 
     <button onClick={this.onNewLayout}>Generate New Layout</button> 
     <ResponsiveReactGridLayout 
      style={styles} // AND THIS! 
      {...this.props} 
      layouts={this.state.layouts} 
      onBreakpointChange={this.onBreakpointChange} 
      onLayoutChange={this.onLayoutChange} 
      // WidthProvider option 
      measureBeforeMount={false} 
      // I like to have it animate on mount. If you don't, delete `useCSSTransforms` (it's default `true`) 
      // and set `measureBeforeMount={true}`. 
      useCSSTransforms={this.state.mounted}> 
      {this.generateDOM()} 
     </ResponsiveReactGridLayout> 
     </div> 
    ) 
    }