0

我想从 to 传递Resizable道具GraphBlock。这Resizable是由其他组件呈现的，所以我不知道如何将道具从它传递到GraphBlock.

我知道事件是一个可能的解决方案，但我相信我可以将道具（宽度和高度。它们用于调整子组件的大小）传递给GraphBlock.

代码空间： https ://codesandbox.io/s/pedantic-goodall-f0p3c ?file=/src/App.js

代码：

import React from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import "react-resizable/css/styles.css";
import { Vega } from 'react-vega';
import layoutConfig from "./layoutconfig";

//Dashboard
const Dashboard = ({ layouts }) => {
  return (
    <div className="dashboard">
      <GridLayout layouts={layouts} />
    </div>
  );
};

//grid layout
const ResponsiveGridLayout = WidthProvider(Responsive);

class GridLayout extends React.Component {
  // handleBreakPointChange = breakpoint => {
  //   this.props.setBreakPoint(breakpoint);
  // };

  render() {
    const { layouts } = this.props;
    return (
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
        onBreakpointChange={this.handleBreakPointChange}
        isDraggable
        isRearrangeable
        isResizable
        draggableHandle=".grid-item__title"
        breakpoints={{ lg: 1280, md: 992, sm: 767, xs: 480, xxs: 0 }}
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
      >
        <div key="graph1">  <GraphBlock /> </div>
      </ResponsiveGridLayout>
    );
  }
}

const GraphBlock = ({ width, height }) => {
  console.log(width)

  const barData = {
    table: [
      { a: 'A', b: 28 },
      { a: 'B', b: 55 },
      { a: 'C', b: 43 },
      { a: 'D', b: 91 },
      { a: 'E', b: 81 },
      { a: 'F', b: 53 },
      { a: 'G', b: 19 },
      { a: 'H', b: 87 },
      { a: 'I', b: 52 },
    ],
  }

  var specDefault = {
    autosize: {
      type: 'fit',
      resize: true,
      contains: 'padding'
    },
    mark: 'bar',
    encoding: {
      x: { field: 'a', type: 'ordinal' },
      y: { field: 'b', type: 'quantitative' },
    },
    data: { name: 'table' },
  }
  return (
    <Vega spec={specDefault} data={barData} actions={false} width={width} height={height} />
  )
}

function App() {
  return (
    <>
      <Dashboard layout={layoutConfig} />
    </>
  )
}

export default App;
4

0 回答 0