在javascript中干燥html包装器

Question

I am using React js and am building a lot of repeating elements that are all getting wrapped in the same html, like so:

<div>
  <div class="child">
    <div class="grand-child">
      <Element1 />
    </div>
  </div>
  <div class="child">
    <div class="grand-child">
      <Element2 />
    </div>
  </div>
  <div class="child">
    <div class="grand-child">
      <Element3 />
    </div>
  </div>
</div>

Instead of having to constantly wrap every Element in 'child' and 'grand-child' divs, is there a simpler way I can write this so I don't have to repeat myself?

I've looked into something like the innerHTML property, which tags an html element and inserts information / elements inside of that original element. What I would like to do is the opposite and instead take my original element and wrap it with other html elements, but it seems like the outerHTML property does not operate in this manner.

Is there any way to wrap html elements as seen in this psuedo solution below? Thanks.

Let <foo></foo> =
  <div class="child">
    <div class="grand-child">
    </div>
  </div>

<div class="parent">
  <foo>
    <p>This is the first element</p>
  </foo>
  <foo>
    <p>This is the second element</p>
  </foo>
  <foo>
    <p>This is the third element</p>
  </foo>
</div>

Answer 1

There are a few good ways to do this: (1) using an array to store the contents and .map ping to the markup you want, and (2) creating a separate component to be the wrapper, passing along the contents as children . You could even combine these, depending on how reusable you want the wrapper component to be:

(1) This should produce the same markup you have in your first example, using .map :

<div>
  {[Element1, Element2, Element3].map((Element, index) => (
    <div class="child" key={index}>
      <div class="grand-child">
        <Element />
      </div>
    </div>
  ))}
</div>

(2) If you want to break out to a separate component, you could do the following, using a stateless functional "Wrapper" component with props.children accessing the passed-down content:

const Wrapper = props => (
  <div class="child">
    <div class="grand-child">
      {props.children}
    </div>
  </div>
)

...

<div>
  <Wrapper>
    <Element1 />
  </Wrapper>
  <Wrapper>
    <Element2 />
  </Wrapper>
  <Wrapper>
    <Element3 />
  </Wrapper>
</div>

Finally, if you wanted to combine these, you can create a wrapper component and use it within a .map call to pass it different contents:

const Wrapper = props => (
  <div class="child">
    <div class="grand-child">
      {props.children}
    </div>
  </div>
)

...


<div>
  {[Element1, Element2, Element3].map((Element, index) => (
    <Wrapper key={index}>
      <Element />
    </Wrapper>
  ))}
</div>

Answer 2

Hi you need children . So for you case I would suggest create wrapper Component.

 const ChildrenWrapper = ({children}) => { return ( <div className="child"> <div className="grand-child"> {children} </div> </div> ); } 

And use it

 <div class="parent"> <ChildWrapper> <p>This is the first element</p> </ChildWrapper> <ChildWrapper> <p>This is the second element</p> </ChildWrapper> <ChildWrapper> <p>This is the third element</p> </ChildWrapper> </div>