Javascript 变异组件以渲染子级

我正在尝试创建一个添加工具提示的HOC（以后可以更重用）。我已经用其他方法提出了一些可行的解决方案，但我想让它尽可能简单易用

基本上，我想知道是否有任何方法可以强制我的

组件渲染其子组件，而不向

添加

{props.children}

。如果这是可能的话，那么我真的可以在将来做得更好

import { nest } from 'recompose';

const Tooltip = () => <div style={{ position: 'absolute', top: 0, left: 0, height: '20px', width: '20px', backgroundColor: 'red' }} />;

const Div = (props) => {
  console.log(props);
  return (
    <div
      style={{
        backgroundColor: '#F2F2F2',
        height: '400px',
      }}
    >
      <h1>content here</h1>
    </div>
  );
};

const DivWithTooltip = nest(Div, Tooltip);

从“重新组合”导入{nest}；
常量工具提示=（）=>；
常量Div=（道具）=>{
控制台日志（道具）；
返回(
满足于此
);
};
const DivWithTooltip=nest（Div，Tooltip）；

你的意思是这样的吗？您可以使用

span

包装而不是

div

来最小化可能出现的样式问题，通常没有问题。使用包装器或道具。孩子们，你必须选择一个

constwithtooltip=ToolTip=>Component=>props=>(
)
const Div=props=>(
在我上空盘旋
)
常量提示=道具=>(
提示
)
const DivWithTooltip=带有工具提示（提示）（Div）
ReactDOM.render(
,
document.getElementById（'app'）
)

.tooltip.tooltiptext{
可见性：隐藏；
}
.tooltip:悬停.tooltiptext{
能见度：可见；
}

为什么不想编写

{props.children}

？如果要渲染子对象，则必须显式地编写它。@Isaddo好吧，我想创建一种帮助器，它只向组件添加一些悬停效果，例如添加工具提示。我可以通过将组件包装在

组件中来干净地完成它，但我只是想看看是否可以使用干净的HOC。这样我就可以说

Component=withHover（Component，TooltipComponent）

或者类似的东西。我确实考虑过这样做，但不确定是否将额外的

div

作为包装会导致样式出现任何问题