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

Question

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

所以我的目标与此类似。

.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

那么，是只有我遇到了这个障碍，还是 React 尚不支持？

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

Answer 1

如果目标是将 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>

Answer 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;

Answer 3

只需使用反引号字符串。

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

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

Important: grid-area names/ids have to start with a alphabetic character

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

How to use grid-template-areas in react inline style?

css

reactjs

css-grid