Webkit-flex не рендерится на реагирующий дочерний компонент в next.js - PullRequest
Новая
       30

Webkit-flex не рендерится на реагирующий дочерний компонент в next.js

0 голосов
/ 27 января 2019

Вот два разных метода, которые дают разные результаты css при рендеринге next.js из стилевых компонентов:

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 в * 1020компонента * и проблема решена, но, тем не менее, эта вещь озадачивает меня, в какой части виноват (next.js / styled-component / или даже bulma-styled-компоненты, которые я использую), и решение не практично (копирование полного CSSрезультат рендеринга).

Кто-нибудь мельком разбирается в этом?Спасибо.

Обновление:

Проблема все еще не решена даже после копирования в компонент styled-components, я постараюсь сделать минимальное репо на этом.

Обновление II:

Вот минимальный репо:

https://codesandbox.io/s/wqoxjq31wl

Вы можете попробовать изменить eachComp на listComp в редакторе index.js чтобы понять, что я имею в виду.

1 Ответ

0 голосов
/ 27 января 2019

Мой плохой ...

Так и должно быть: 

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