将 className、props、attributes 从父组件传递给所有子组件，无需重复代码

Question

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

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;

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

我想将 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);
                }
            }

Answer 1

cloneElement对你cloneElement吗？

使用element作为起点克隆并返回一个新的 React 元素。 生成的元素将具有原始元素的 props，新的 props 浅合并。 新的孩子将取代现有的孩子。 原始元素的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 假设您可以将数据元素转换为数组形式，以便对它们进行迭代。