Передайте className, props, атрибуты из родительского компонента во ВСЕ дочерние компоненты без дублирования кода

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;

Привет всем. Как видно из фрагментов кода выше. У меня есть два реагирующих функциональных компонента: родительский и дочерний.

Я хотел бы передать функции className, onClick и атрибут всем объектам «polygon and 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, используя element в качестве отправной точки. Полученный элемент будет содержать реквизиты исходного элемента, а новые реквизиты будут слиты поверхностно. Новые дети заменят существующих детей. 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));

В этом OF C предполагается, что вы можете получить элементы данных в виде массива для их итерации.