[英]Apply style “cursor: pointer” to all React components with onClick function
我想应用样式cursor:pointer
具有onClick函数的所有React元素的cursor:pointer
。 我知道我可以对每个元素这样做:
<a onClick={handleClick} style={{cursor:'pointer'}}>Click me</a>
或这个:
<a onClick={handleClick} className="someClassWithCursorPointer">Click me</a>
但我宁愿能够做这样的事情来将风格应用到所有元素:
<style>
[onclick] {
cursor: pointer;
}
</style>
但这不起作用,因为在使用React的onClick
属性时,元素的呈现HTML中没有实际的onclick
属性。
小提琴: https : //jsfiddle.net/roj4p1gt/
我不确定是否有一种很好的方法可以自动执行此操作而不使用某种拦截React元素的创建并修改它们(或者可能是源级转换)的机制。 例如,使用Babel,您可以使用babel-plugin-react-transform并使用onClick
prop在所有元素中添加className
,使用沿着这些行的内容(警告:伪代码):
export default function addClassNamesToOnClickElements() {
return function wrap(ReactClass) {
const originalRender = ReactClass.prototype.render;
ReactClass.prototype.render = function render() {
var element = originalRender.apply(this, arguments);
return addClickClassNamesToApplicableElements(element);
}
return ReactClass;
}
}
function addClassNamesToApplicableElements(elem) {
if (!elem || typeof elem === "string") return elem;
const children = elem.children;
const modifiedChildren = elem.props.children.map(addClassNamesToApplicableElements);
if (elem.props.onClick) {
const className = elem.props.className || "";
return {
...elem,
props: {
...elem.props,
className: (className + " hasOnClick").trim(),
children: modifiedChildren
}
};
} else {
return {
...elem,
props: {
...elem.props,
children: modifiedChildren
}
}
};
}
以下是第二部分工作的快速示例 : https : //bit.ly/1kSFcsg
你可以用css轻松完成:
a:hover {
cursor:pointer;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.