在 javascript 中干燥 html 包装器答案

【问题标题】：DRYing html wrappers in javascript在 javascript 中干燥 html 包装器
【发布时间】：2018-07-16 18:46:15
【问题描述】：

我正在使用 React js，并且正在构建大量重复的元素，这些元素都被包裹在同一个 html 中，如下所示：

<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>

不必不断地将每个元素包装在 'child' 和 'grand-child' div 中，有没有更简单的方法可以编写这样我不必重复自己？

我研究了类似innerHTML 属性的东西，它标记了一个html 元素并在该原始元素中插入信息/元素。我想做的恰恰相反，而是将我的原始元素与其他 html 元素一起包装，但似乎 outerHTML 属性不以这种方式运行。

有什么方法可以包装 html 元素，如下面的这个伪解决方案所示？谢谢。

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>

【问题讨论】：

标签： javascript jquery html reactjs

【解决方案1】：

您好，您需要children。因此，对于您的情况，我建议创建包装器组件。

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

并使用它

<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>

【讨论】：

这是正确答案。匿名的反对者应该大声说出来。

【解决方案2】：

有一些很好的方法可以做到这一点：(1) 使用数组来存储内容并将.mapping 到您想要的标记，以及 (2) 创建一个单独的组件作为包装器，传递内容为children。您甚至可以将这些组合起来，具体取决于您希望包装组件的可重用程度：

(1) 这应该会产生与您在第一个示例中相同的标记，使用 .map:

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

(2) 如果您想拆分成一个单独的组件，您可以使用无状态的功能性“包装器”组件和props.children 访问传递的内容：

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>

最后，如果你想组合这些，你可以创建一个包装器组件并在 .map 调用中使用它来传递不同的内容：

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>

【讨论】：