[英]Pass className,props,attributes from parent component to ALL child components without code duplication
------------------------ React Parent Functional Component ------------------------ ------------------------ React 父功能组件 ---------------------- ——
<div style={{ width: "100%", overflow: "scroll", border: "1px solid #ecf0f1", margin: "10px 0px 0px 10px" }}>
<svg id='wall' ref={wall} width="5000px" height="500px">
<PanelSvgs initColor={classes.greywall} selectPanel={selectPanel} />
</svg>
</div>
------------------------ React Child Functional Component ------------------------ ------------------------ React 子功能组件 ---------------------- ——
function PanelSvgs(props) {
return (
<Fragment>
<polygon className={props.initColor} onClick={e => props.selectPanel(e)} bool="false" id="_x34_88_x2F_9" points="35.14,70.14 34.94,148.88 113.68,148.88 113.68,73.38"></polygon>
<polygon className={props.initColor} onClick={e => props.selectPanel(e)} bool="false" id="_x34_88_x2F_9" points="35.14,70.14 34.94,148.88 113.68,148.88 113.68,73.38"></polygon>
<rect className={props.initColor} onClick={e => props.selectPanel(e)} bool="false" id="_x36_01_x2F_12" x="34.94" y="148.88" width="78.74" height="78.74" ></rect>
</Fragment>
}
export default PanelSvgs;
Hello everyone.大家好。 As seen from the code snippets above.
从上面的代码片段可以看出。 I have two react functional components, the parent and child.
我有两个反应功能组件,父组件和子组件。
I would like to pass down the className, onClick function and an attribute to all the "polygon and rect" objects.我想将 className、onClick 函数和一个属性传递给所有“多边形和矩形”对象。 As I have approximately 2000 objects, is there a way to pass these attributes down in a simplified way instead of duplicating them across all 2000 objects.?
由于我有大约 2000 个对象,有没有办法以简化的方式传递这些属性,而不是在所有 2000 个对象中复制它们。?
In Jquery and Javascript, it was relatively easy.在 Jquery 和 Javascript 中,这相对容易。
const panels = document.getElementById('wall').children;
// ADD onclick listener to children objects
for (let p in panels) {
let panel = panels[p];
panel.onclick = () => {
selectPanel(panel);
}
}
Would cloneElement
work for you? cloneElement
对你cloneElement
吗?
Clone and return a new React element using
element
as the starting point.使用
element
作为起点克隆并返回一个新的 React 元素。 The resulting element will have the original element's props with the new props merged in shallowly.生成的元素将具有原始元素的 props,新的 props 浅合并。 New children will replace existing children.
新的孩子将取代现有的孩子。
key
andref
from the original element will be preserved.原始元素的
key
和ref
将被保留。
React.cloneElement()
is almost equivalent to:React.cloneElement()
几乎等同于:
<element.type {...element.props} {...props}>{children}</element.type>
Something like:就像是:
import React, { cloneElement} from 'react';
...
const elementProps = {
className: props.initColor,
onClick: props.selectPanel,
bool: "false"
id: "_x34_88_x2F_9"
points: "35.14,70.14 34.94,148.88 113.68,148.88 113.68,73.38"
};
wall.current.children.map(element => cloneElement(element, elementProps));
This OFC, assumes you can get your data elements into an array form in order to iterate over them.这个 OFC 假设您可以将数据元素转换为数组形式,以便对它们进行迭代。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.