如何扩展已经在使用的 React 组件？

Question

这适用于几乎所有符合以下思路的场景：

我有一个使用 React Router <Link> 的 React 应用程序，它们分散在我的应用程序中。我想扩展或原型化 <Link> 组件，以便在呈现它们时有一个新属性。（我只想为所有 Link 个标签添加一个属性。）

如何更新整个应用程序中使用的 Link 组件以获得新属性 [无需创建新组件，例如 <CustomAttributeLink>]？

谢谢

Answer 1

您可以克隆该元素并使用 React.cloneElement 添加额外的道具，例如：

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

Return clonedElementWithExtraProps;

Answer 2

最好的方法是克隆元素，您应该使用 React.cloneElement。要使该组件在任何地方都可用，只需使用它创建一个新组件，然后将其导出。

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

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

如何扩展已经在使用的 React 组件？

How do I extend React components already in use?

javascript

reactjs

components

prototype

extends