Scroll Not Working：react-grid-layout：0-showcase example

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> 
    ) 
    }