Skip to content

Latest commit

 

History

History
61 lines (44 loc) · 1.56 KB

react-collapsing-element.md

File metadata and controls

61 lines (44 loc) · 1.56 KB
Raw

React Collapsing Element

Background

In React, sometimes I run into elements with the following structure:

<MyCustomButtonComponent href="http://button-link-target">
  <MyFlexboxComponent flexDirection="row" />
</MyCustomButtonComponent>

which renders into the DOM as follows:

<a href="http://button-link-target">
  <div style={{flexDirection: "row"}} />
</a>

but I'd like it to render as

<a href="http://button-link-target" style={{flexDirection: "row"}} />

The fact that that's not easily possible right now makes me not want to write MyCustomButtonComponent and MyFlexboxComponent as separate components, but ideally I'd want to keep separate concerns separate.

Idea

A React component ElementFragment that can be used as follows:

<ElementFragment className="outer">
  <ElementFragment className="inner">
    <ElementFragment tagName="a" href="http://link-target" />
  </ElementFragment>
</ElementFragment>

to produce this DOM tree:

<a className="outer inner" href="http://link-target" />

Furthermore, components that return a single instance of ElementFragment must be able to declare so and allow themselves to not render a DOM element as well:

<ElementFragment className="outer">
  <MyInnerElementComponent>
    <MyCustomButtonComponent href="http://link-target" />
  </MyInnerElementComponent>
</ElementFragment>

should, with the correct implementations of MyInnerElementComponent and MyCustomButtonComponent, also return

<a className="outer inner" href="http://link-target" />