Question

是否可以创建一个更高阶的React组件来渲染多个兄弟节点，而不包括父节点？

我目前正在使用React.cloneElement来向子元素呈现父元素。

const RenderChildren = (props) =>
    React.cloneElement(props.children, children.props);

<RenderChildren>
    <div>
        <div>Child One</div>
        <div>Child Two</div>
    <div>
</RenderChildren>

如何修改RenderChildren以呈现子元素而无需添加额外的DOM节点？如果任何一个孩子是React组件（而不是React元素），我想将所有的道具传递给子元素。

const RenderChildren = (props) => ...

<RenderChildren>
    <div>Child One</div>
    <div>Child Two</div>
</RenderChildren>

Answer 1

我认为您正在寻找在React @ 16上添加的<React.Fragment>或者目前多个编译器不支持的速记<> </>

进一步阅读：https://devdocs.io/react/react-api#reactfragment;

Answer 2

首先，您没有HOC。 HOC是一个接受组件并返回组件的函数。你只有一个与儿童一起工作的组件元素。

您可以使用React.Children.map与React.cloneElement结合来完成此任务。

警告！不确定它是否适用于React @ 15

const RenderChildren = ({children, ...props}) =>
      React.Children.map(children, child => React.cloneElement(child, props))

const App = () => (
  <RenderChildren className="everybody-likes-pink-boxes">
    <div> Child One </div>
    <div> Child Two </div>
  </RenderChildren>
)

ReactDOM.render( <App /> , document.getElementById('app'))

.everybody-likes-pink-boxes {
  background-color: pink;
  color: white;
  margin: 5px;
  padding: 5px;
  width: 70px;
  height: 70px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<div id="app">App Goes Here</div>

React HOC渲染没有父节点的兄弟节点

2 个答案: