help wanted
Métriques du dépôt
- Stars
- (4 286 étoiles)
- Métriques de merge PR
- (Aucune PR mergée en 30 j)
Description
After #18 failed with the VuePlugin I tried to do the same with the alternative ReactWrapper and though the following code works,
<template>
<div class="hello">
<react :component="grid">
<react :component="gridcol">2</react>
<react :component="gridcol">2</react>
</react>
</div>
</template>
<script>
import ScrollIndicator from '@/components/ScrollIndicator.vue'
import { ReactWrapper } from 'vuera'
import { Grid, GridCol } from 'griz'
export default {
name: 'home',
data() {
return {
msg: 'Test data',
grid: Grid,
gridcol: GridCol,
}
},
components: { ScrollIndicator, react: ReactWrapper }
}
</script>
In a React application grid will be a flex container and grid-col its flex items. The problem here is each of them are rendered with extra divs inside of them which breaks the flex layout.
I get:
gridComponentWrapper
|--grid
|-- div
|-- gridcolComponentWrapper
|-- gridcol
|-- div
|-- 2
|-- gridcolComponentWrapper
|-- gridcol
|-- div
|-- 2
where I expected
grid
|-- gridcol
|-- 2
|-- gridcol
|-- 2