如何在反应内联样式中使用网格模板区域？答案

【问题标题】：How to use grid-template-areas in react inline style?如何在反应内联样式中使用网格模板区域？
【发布时间】：2018-05-24 10:01:55
【问题描述】：

所以，当我注意到 grid-template-areas 有一些不同的语法可能与内联反应样式不兼容时，我一直在使用 css-grids 进行反应。我没有使用任何库，只是使用带有样式道具的普通旧反应内联样式。

所以我的目标与此类似。

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-areas: "header header"
                       "aside main"
                       "footer footer"
}

.header {
  grid-area: header;
  border: 1px solid red;
}
.main {
  grid-area: main;
  border: 1px solid green;
} 

.aside {
  grid-area: aside
}
.footer {
  grid-area: footer;
  border: 1px solid yellow;
}

菲德：https://jsbin.com/lejaduj/2/edit?html,css,output

布局很简单，“header”和“footer”覆盖所有列，“aside”和“main”覆盖一半。这只是为了演示目的，所以我保持简单。
请特别注意 grid-template-areas 的多个值如何仅由双引号分隔。

经过一番思考，我认为我们可以在反应内联样式中使用 gridTemplateAreas 中的数组。这似乎不起作用。

我再次尝试使用template-literals，但也没有用。

沙盒：https://codesandbox.io/s/zx4nokmr5l

那么，是只有我遇到了这个障碍，还是反应中还不支持？

我宁愿不使用任何额外的库或框架来响应尽可能地实现这一点。

【问题讨论】：

标签： css reactjs css-grid

【解决方案1】：

只需使用反引号字符串。

gridTemplateAreas: `
                    'header header'
                    'aside main'
                    'footer footer'
                `

【讨论】：

【解决方案2】：

如果你需要一个风格的对象，这很有效

    myStyle = {
        display: 'grid',
        gridTemplateAreas: "'header' 'content' 'footer'",
        gridTemplateRows: '50px calc(100vh - 100px) 50px' 
    };

并使用内联样式对象

就像我使用 styletron 所做的那样

    import { styled } from 'styletron-react';

    const myStyle = {
        backgroundColor: 'whitesmoke',
        display: 'grid',
        gridTemplateAreas: "'header' 'content' 'footer'",
        gridTemplateRows: '50px calc(100vh - 100px) 50px'
    };

    const Layout = styled('div', (props) => (myStyle));

    export default Layout;

【讨论】：

【解决方案3】：

如果目标是将 grid-template-areas 与 HTML style 属性（即 CSS 内联样式）一起使用，则使用单引号而不是双引号。

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  /* grid-template-areas: "header header"
                          "aside main"
                          "footer footer"; */
}

.header {
  grid-area: header;
  background-color: aqua;
}

.main {
  grid-area: main;
  background-color: lightgreen;
}

.aside {
  grid-area: aside;
  background-color: yellow;
}

.footer {
  grid-area: footer;
  background-color: pink;
}

<body class="wrapper" style="grid-template-areas: 'header header' 'aside main' 'footer footer' ">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</body>

【讨论】：

您的部分问题涉及双引号。这就是我要解决的问题。
天哪。你可能在不经意间帮助了我。当然，即使在json 中，您也可以在双引号中添加单引号。我怎么没想到。谢谢您的帮助。如果您可以编辑您的答案以反映这一点，那么我很乐意将其标记为正确。
哈哈。我在考虑 PHP，这是我通常使用这种方法的地方。
我不确定您希望我如何编辑答案。随意编辑它。
已编辑。如果有任何需要添加的内容，请随时添加。

【解决方案4】：

对于拥有这样一个二维数组的人：

let grid2D = [
 ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
 ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
 ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
 [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
 [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"]
]

要连接数组以便可以将其转换为内联样式，您可以简单地使用这一行

let stringGrid = "'" + grid2D.map(arr => arr.join(' ')).join("' '") + "'";

在 react 组件中它可以这样工作：

export class Grid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      grid2D: [
       ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
       ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
       ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
       [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
       [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"]
      ]
    };
  }

  getTemplateAreas(grid2D) { 
    return "'" + grid2D.map(arr => arr.join(' ')).join("' '") + "'"; 
  }

  render() {
    const { grid2D } = this.state;
    return (
      <div style={{ gridTemplateAreas: this.getTemplateAreas(grid2D), display: 'grid', width: '100%', height: "100%" }}>
         {grid2D.map((arr, i1) => {
          return arr.map((id, i2) => {
            return <div key={i1 + '' + i2} style={{ gridArea: id }} />;
          });
        })}
      </div>
    );
  }
}

重要提示：网格区域名称/ID 必须以字母字符开头

【讨论】：