javascript - Reposition React child to cover parent -
with lot of recursively nested children like
const data = [ { "id": 1, "children": [ { "id": 2 }, { "id": 3, "children": [ { "id": 4 }, { "id": 5, "children": [ { "id": 6 } ] } ] } ] } ] const node = props => { return ( <div style={{ 'display': 'grid', 'gridtemplatecolumns': '1em auto 1em' }}> <span style={{ 'background': 'red' }}/> { props.data.children ? <div style={{ 'background': 'green' }}> <div>{props.data.id}</div> {props.data.children.map(n => <node key={n.id} data={n} />)} </div> : <div>{props.data.id}</div> } <span style={{ 'background': 'blue' }}/> </div> ) } const app = props => { return ( <div> {props.data.map(n => <node key={n.id} data={n} />)} </div> ) } reactdom.render(<app data={data} />, document.getelementbyid('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
how can of these nodes (re)positioned have parent (same) x position? i.e. child covers parent , there's no visible nesting/indenting/containment, , red, blue , green backgrounds columns.
i think i'd prefer nested solution on stuff tethering, appending, teleporting, context-shifting other dom elements , on.
(here's same example on stackblitz.)
Comments
Post a Comment