传递className，props，从父组件到所有子组件的属性，无需代码重复

Question

------------------------ React Parent功能组件-------------------- ----

              <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子功能组件-------------------- ----

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;

大家好。从上面的代码段可以看出。我有两个React功能组件，父级和子级。

我想将className，onClick函数和一个属性传递给所有“多边形和矩形”对象。由于我有大约2000个对象，有没有一种方法可以简化这些属性的传递，而不是在所有2000个对象中复制它们。

在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);
                }
            }

------------------------ React Parent功能组件------------------ ------

]

cloneElement能为您工作吗？

克隆并以element作为开头返回一个新的React元素点。结果元素将具有原始元素的道具新的道具在浅层融合。新孩子将取代现有的孩子。原始元素的key和ref将是保存。

React.cloneElement()几乎等同于：

<element.type {...element.props} {...props}>{children}</element.type>

类似：

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));
此OFC，假定您可以将数据元素转换为数组形式以便对其进行迭代。

Answer 1

cloneElement能为您工作吗？