我的目标是在所有带有链接到外部域的 href
的 anchor 元素上添加点击处理程序。
这是我的组件:
import React from 'react';
import LinkWrapper from './LinkWrapper'
function ComponentWithLinks() {
return (
<div>
<div>
<ul>
<li>
<a href="/">internal link</a>
</li>
<li>
<a href="http://example.com/external">external link</a>
</li>
</ul>
</div>
<div>
<p>
<a href="http://google.com">another external link</a>
</p>
</div>
</div>
);
}
const wrapped = LinkWrapper(ComponentWithLinks)
export default wrapped;
这是我的包装器:
import React from 'react';
function LinkWrapper(WrappedComponent) {
return class extends React.Component {
render() {
return <WrappedComponent {...this.props} />;
}
}
}
export default LinkWrapper;
子级嵌套任意深。
我如何捕获每一个以便我可以将点击处理程序附加到它?
最佳答案
好吧,这个比较乱,我们就用React.Children API遍历所有反应元素,和React.createElement注入(inject)属性(在本例中为 onClick)。
const injectToChildren = (children, addOnClickToAnchors) =>
React.Children.map(children, addOnClickToAnchors);
const injectToAnchor = child =>
React.cloneElement(child, { onClick: () => console.log('New Click') });
const addOnClickToAnchors = child => {
const children = child.props.children;
// Recursion end condition
if (!children) return;
const isAnchor = child.type === 'a';
return isAnchor
? injectToAnchor(child)
: {
...child,
// Recursion step
props: { children: injectToChildren(children, addOnClickToAnchors) }
};
};
function ComponentWithLinks({ children }) {
// Map every children recursively
return injectToChildren(children, addOnClickToAnchors)
}
function App() {
return (
<ComponentWithLinks>
// All kinds of children components
</ComponentWithLinks>
);
}
关于javascript - 使用 React 高阶组件获取所有子组件 href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56227327/