3

我正在尝试复制react-grid-layout的0-showcase示例，一切正常，除了包含网格及其组件的主要 HTML 元素不可滚动。我尝试将溢出-y 滚动到正文和后续元素，但无济于事。我正在使用 Gastsby 静态站点生成器来加快开发速度。因此，在我的页面中，直接在 Gastby 文件夹结构中，我创建了一个grid.js文件，其中包含以下反应代码。几乎所有内容都与此处示例代码中的定义相同。这可能是我没有得到的一个小的 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>
    )
  }
}
4

1 回答 1

1

这是一个非常愚蠢的问题。我只需要做

body {
  overflow: auto
}

并为我的 react-grid-layout 组件提供高度

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>
    )
  }
于 2017-02-24T08:16:17.340 回答