Question

我正在使用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>

不是必须不断地将每个元素包装在“孩子”和“大孩子”的div中，是否有更简单的方法可以写这个，所以我不必重复自己？

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

有没有办法包装html元素，如下面的psuedo解决方案中所示？感谢。

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

有几种好方法可以做到这一点：（1）使用数组存储内容并.map ping你想要的标记，以及（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）如果你想要突破到一个单独的组件，你可以使用无状态功能＆＃34; Wrapper＆＃34; 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>

Answer 2

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

＆＃13;

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

＆＃13;

并使用它

＆＃13;

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

＆＃13;

在javascript

2 个答案: