改变组件以渲染子组件答案

【问题标题】：Mutate component to render children改变组件以渲染子组件
【发布时间】：2017-11-18 17:13:53
【问题描述】：

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

基本上，我想知道是否有任何方法可以强制我的<Div /> 组件在不将{props.children} 添加到<Div /> 的情况下渲染其子组件。如果能以某种方式做到这一点，那么我将来真的可以做得更好。

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

【问题讨论】：

你为什么不想写{props.children}？你想渲染孩子，你必须明确地写出来。
@Isaddo 好吧，我想创建某种助手，它只是为组件添加一些悬停效果，例如添加工具提示。我可以通过将组件包装在 <Hover> 组件中来干净地做到这一点，但我只是想看看是否可以使用干净的 HOC。这样我就可以说Component = withHover(Component, TooltipComponent) 或类似的东西。

标签： javascript reactjs recompose

【解决方案1】：

你的意思是这样的吗？您可以使用span 包装器而不是div 来尽量减少可能出现的样式问题，一般没有问题。使用 wrapper 或props.children，你必须选择一个。

const withToolTip = ToolTip => Component => props => (
  <div className="tooltip">
    <Component {...props} />
    <ToolTip {...props} />
  </div>
)

const Div = props => (
  <div>Hover over me</div>
)
const Tip = props => (
  <div className="tooltiptext">tip</div>
)
const DivWithTooltip = withToolTip(Tip)(Div)

ReactDOM.render(
  <DivWithTooltip />,
  document.getElementById('app')
)

.tooltip .tooltiptext {
    visibility: hidden;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

【讨论】：

我确实想过做这样的事情，但不确定是否将额外的 div 作为包装器会导致样式出现任何问题