Javascript 反应UI元素的放置？

我是个新手，所以我不知道如何放置UI元素

我想要以下布局：

但我不太明白。在黑框中应该有一组复选框（我已经制作的组件）垂直堆叠，在蓝框中是同一组复选框，但水平放置。在红色框中，有一个谷歌散点图（我也设置了它）

使用react列，我想我可以设置它，使用两个列。但后来我意识到我必须以某种方式设置复选框的父项，所以这不是一个解决方案

然后我想“为什么不使用网格呢？”所以我发现谷歌在他们的材料包中有网格（这很好，因为我一直在使用它），所以我导入了它，但我仍然不能完全正确：

我该如何解决这个问题

我的代码如下：

return(
    <div>
        <Grid container spacing={0}>
            <Grid item xs={3}>
                <CheckboxContainer checkboxes={checkboxes}/>
            </Grid>
            <Grid item xs={9}>
                <Chart
                    height="400px"
                    chartType="ScatterChart"
                    loader={<div>Loading Chart</div>}
                    data={[
                        ['Level','Y'],
                        [-4,-1],
                        [-3,3],
                        [-2,-2],
                        [-1,1],
                        [0,5],
                        [1,14],
                        [2,5],
                        [3,3.5],
                        [4,7],
                    ]}
                    options={{
                        title: 'Transparency',
                        hAxis: { title: 'Level', minValue: -9, maxValue: 9 },
                        vAxis: { title: 'Y', minValue: -9, maxValue: 9 },
                        legend: 'none',
                    }}
                    rootProps={{ 'data-testid': '1'}}
                />
            </Grid>
            <Grid item xs={12}>
                <CheckboxContainer checkboxes={checkboxes} />
            </Grid>
        </Grid>
    </div>
)

返回(
)

您可以使用纯CSS轻松创建此布局，使用flexbox用于水平和垂直复选框，使用float用于散点图

render（）{
返回(
检查这个
检查这个
检查这个
检查这个
散点图
)；

.page{
宽度：100vw；
}
梅因先生{
显示器：flex；
}
.侧边栏{
显示器：flex；
弯曲方向：立柱；
宽度：20%；
}
.页脚{
浮动：对；
宽度：80%；
}

这取决于您在项目中如何使用CSS，但使用最新版本的我得到了以下结果：

这是使用的代码：

import React from 'react';
import PropTypes from 'prop-types';
import Grid from '@material-ui/core/Grid';
import Checkbox from '@material-ui/core/Checkbox';
import { Chart } from "react-google-charts";
import { withStyles } from '@material-ui/core/styles';
import withRoot from '../withRoot';

const styles = theme => ({
  root: {
    textAlign: 'center',
    paddingTop: theme.spacing.unit * 20,
  },
  column1: {
    display:'flex',
    flexDirection:'column',
  },
  row2: {
    textAlign:'right',
  }
});

class Index extends React.Component {
  state = {
    open: false,
    checkedA: true,
    checkedB: true,
    checkedF: true
  };

  handleClose = () => {
    this.setState({
      open: false,
    });
  };

  handleClick = () => {
    this.setState({
      open: true,
    });
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.checked });
  };


  getCheckboxes = () => {
    return (
      <>
        <Checkbox
          checked={this.state.checkedA}
          onChange={this.handleChange('checkedA')}
          value="checkedA"
        />
        <Checkbox
          checked={this.state.checkedB}
          onChange={this.handleChange('checkedB')}
          value="checkedB"
          color="primary"
        />
        <Checkbox value="checkedC" />
        <Checkbox disabled value="checkedD" />
        <Checkbox disabled checked value="checkedE" />
        <Checkbox
          checked={this.state.checkedF}
          onChange={this.handleChange('checkedF')}
          value="checkedF"
          indeterminate
        />
        <Checkbox defaultChecked color="default" value="checkedG" />
      </>
    );
  }

  render() {
    return(
          <div>
              <Grid container spacing={0}>
                  <Grid item xs={3} className={this.props.classes.column1}>
                    {this.getCheckboxes()}
                  </Grid>
                  <Grid item xs={9}>
                      <Chart
                        height="400px"
                        chartType="ScatterChart"
                        loader={<div>Loading Chart</div>}
                        data={[
                            ['Level','Y'],
                            [-4,-1],
                            [-3,3],
                            [-2,-2],
                            [-1,1],
                            [0,5],
                            [1,14],
                            [2,5],
                            [3,3.5],
                            [4,7],
                        ]}
                        options={{
                            title: 'Transparency',
                            hAxis: { title: 'Level', minValue: -9, maxValue: 9 },
                            vAxis: { title: 'Y', minValue: -9, maxValue: 9 },
                            legend: 'none',
                        }}
                        rootProps={{ 'data-testid': '1'}}
                    />
                  </Grid>
                  <Grid item xs={12} className={this.props.classes.row2}>
                    {this.getCheckboxes()}
                  </Grid>
              </Grid>
          </div>
      );
  }
}

Index.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withRoot(withStyles(styles)(Index));

从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Checkbox”导入复选框；
从“反应谷歌图表”导入{Chart}；
从“@material ui/core/styles”导入{withStyles}”；
从“../withRoot”导入withRoot；
常量样式=主题=>({
根目录：{
textAlign:'中心'，
paddingTop:theme.space.unit*20，
},
第1栏：{
显示：'flex'，
flexDirection:“列”，
},
第2行：{
textAlign:“右”，
}
});
类索引扩展了React.Component{
状态={
开：错，
查克达：是的，
是的，
checkedF：对
};
handleClose=（）=>{
这是我的国家({
开：错，
});
};
handleClick=（）=>{
这是我的国家({
开放：是的，
});
};
handleChange=name=>event=>{
this.setState（{[name]：event.target.checked}）；
};
GetCheckBox=（）=>{
返回(
);
}
render（）{
返回(
{this.getcheckbox（）}
{this.getcheckbox（）}
);
}
}
Index.propTypes={
类：PropTypes.object.isRequired，
};
使用根导出默认值（使用样式（样式）（索引））；

上面的代码到底出了什么问题？我测试过，它看起来像你想要的……你使用的是材质ui和什么版本？@guilhermelmi我的图片看起来与我想要的完全不匹配。你能给我看一张你这边的图片吗？我很困惑。它不太清楚。我用过你的代码，但它看起来和你的不太一样。