Как расширить уже используемые компоненты React?

Question

Это относится практически ко всем сценариям в следующих направлениях:

У меня есть приложение React, которое использует React Router <Link> s, и они разбросаны по всему моему приложению. Я хочу расширить или создать прототип компонента <Link>, чтобы при рендеринге появился новый атрибут. (Я просто хочу добавить атрибут ко всем тегам ссылки.)

Как я могу обновить компонент Link, который используется в приложении, чтобы получить новый атрибут [без создания нового компонента, например <CustomAttributeLink>]?

Спасибо

Answer 1

Лучший способ сделать это - клонировать элемент, вы должны использовать React.cloneElement . Чтобы сделать компонент пригодным для использования везде, просто создайте новый компонент, используя его, и экспортируйте его.

import React from "react";
import {Link} from "react-router";

const CustomLinkAttribute = React.cloneElement(Link, {
  newProp: "New prop val here"
});
export default CustomLinkAttribute;

Answer 2

Вы можете клонировать элемент и добавить дополнительные реквизиты, используя React.cloneElement например:

var clonedElementWithExtraProps = React.cloneElement(
    MainElement, 
    { newProp: "This is a new prop" }
);

Return clonedElementWithExtraProps;