help wanted
Metriche repository
- Star
- (4260 star)
- Metriche merge PR
- (Nessuna PR mergiata in 30 g)
Descrizione
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