将类名、道具和属性从父组件传递到所有子组件，而不需要代码重复

Question

------------------------反应父功能组件------------------------

              <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>

------------------------反应子功能组件------------------------

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;

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

我想将类名、onClick函数和属性传递给所有“polygon和rect”对象。由于我有大约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);
                }
            }

Answer 1

cloneElement对你有用吗？

使用元素作为起点克隆并返回新的React元素。结果元素将使原始元素的道具与新道具浅合并。新子女将取代现有子女<原始元素中的代码>键和<代码>参考将被保留。

反应。cloneElement（）几乎等同于：

类似的东西：

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假设您可以将数据元素转换成数组形式，以便对它们进行迭代。