css - 你如何有效地将 CSS 网格布局与 React 结合使用?

标签 css reactjs single-page-application

我目前正在构建一个单页应用程序,使用 ReactJs 和 CSS 网格布局来放置和设置组件样式。

然而,这两种技术并不能很好地结合在一起:CSS 网格布局只能(很容易)应用于父容器的子元素(网格项)。但 ReactJS 的本质意味着具有孙子组件甚至曾孙组件的组件很常见。

举个例子:

React 组件树:App > ToDoList > ToDo Item > Details...

如果在单击时,我想将“ToDo Item”移动到“App”组件的网格行:1,似乎唯一的方法是让 ToDoList 本身成为整个 App 组件的网格。这会导致页面上其他元素的布局问题。

我认为这两种方法不能很好地协同工作是否正确,还是我对这两种技术的理解存在缺陷?

最佳答案

你是对的,子网格已从 CSS 网格候选建议 (https://github.com/w3c/csswg-drafts/issues/958) 中弃用。

希望它们能重新出现,它们似乎对简化复杂的布局非常有用。我只发现 CSS 网格在布置 React 应用程序或容器的顶层时很有用。

关于css - 你如何有效地将 CSS 网格布局与 React 结合使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44409117/

相关文章:

javascript - 在 angular.js 应用程序中维护页面刷新时的客户端页面状态

css - 使用 LESS 构建选择器列表

html - 我可以在 Safari 和 Chrome 上禁用 YUI 菜单中的蓝色突出显示吗?

html - <select>::before 图标不可点击

javascript - 我应该在 React.js 函数组件中哪里进行 AJAX 和 API 调用?

image - Phonegap 图像未显示

javascript - 使用 React-Context 时对象不可迭代错误

javascript - 如何在单页应用程序中添加滑动页面过渡?

javascript - Vue.JS 嵌套 v-for 抛出 null/未定义错误

HTML/CSS 布局数的表达式的幂(a^x)