时间戳

首页 > 解决方案 > Webkit-flex 未在 next.js 中的反应子组件上呈现

reactjs - Webkit-flex 未在 next.js 中的反应子组件上呈现

问题描述

下面是两种不同的方法，它们在从 styled-components 渲染 next.js 时给出不同的 css 结果：

index.js：

return (
// list the children
{data.map((item, key) => (
 <ParentComp key={key || "0"}>
   <ChildComp data={item} />
</ParentComp>
//...

相比：

return (
// state each children
<ParentComp>
    <ChildComp/>
    <ChildComp/>
</ParentComp>
//...

将呈现我在开发者控制台上看到的不同 css：

/* when the children is listed */
.ParentComp {
display: flex;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
align-items: flex-start;
}

.ChildComp {
min-height: 400px;
width: 264px;
flex: 0 0 264px;
margin: 5px;
}

相比：

/* when each children is stated (the intended one) */
.ParentComp {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;

.ChildComp {
-webkit-flex: 0 0 264px;
-ms-flex: 0 0 264px;
flex: 0 0 264px;
margin: 5px;
min-height: 400px;
width: 264px;
}

即使它们来自相同styled-component的组件（ParentComp和ChildComp），包含相同的代码，因此在浏览器上预期的行为相同（它们不是）。

当然，我可以将预期的 css 结果完全覆盖到styled-component's 组件并解决了问题，但尽管如此，这件事让我感到困惑，应该归咎于哪一部分（next.js/styled-component/甚至是我使用的 bulma-styled-components ) 并且该解决方案不实用（复制完整的 css 渲染结果）。

有人对此有所了解吗？谢谢。

更新：

即使复制到样式组件的组件后问题仍然没有解决，我将尝试对此进行最小化回购。

更新二：

这是最小的回购：

https://codesandbox.io/s/wqoxjq31wl

您可以尝试在编辑器处更改eachComp为以了解我的意思。listCompindex.js

标签： reactjsjsxstyled-componentsnext.jsreact-component

解决方案

我的错...

它应该是这样的：

        <ParentComp >
        {data.map((item, key) => (
          <ChildComp key={key || "0"} data={item} />
          ))}
        </ParentComp >

推荐阅读