Компонент Mutate для рендеринга детей

Question

Я пытаюсь создать 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);

Answer 1

Вы имеете в виду что-то подобное? Ты можешь использовать span обертка вместо div чтобы свести к минимуму возможные проблемы с оформлением, как правило, нет проблем. Используйте обертку или 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>