我正在尝试创建一个 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);
最佳答案
你的意思是这样的吗?您可以使用 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>
关于javascript - 改变组件以渲染子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44580554/