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

Question

这适用于几乎任何场景:

我有一个使用 React Router 的 React 应用程序 <Link> s，它们分散在我的应用程序中。我想扩展 <Link> 或对其进行原型(prototype)设计组件，以便在渲染它们时有一个新属性。 (我只想为所有链接标记添加一个属性。)

如何更新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;