如何在React中应用UI道具

突击队

我使用外部UI库，该库具有Button组件。我想构建一个NewButton组件，该组件将从库Button组件中获取所有道具，并接受一些我将在其之上添加的额外道具（例如“ url”和“ text”，如下所示）。

我尝试了类似的方法，不确定实际的“ ... libraryButtonProps”在哪里放置：

import * as React from "react";
import { Button } from "library/buttons";

interface NewButtonProps {
  text: string;
  url: string;
}

export const NewButton = ({ text, url, ...libraryButtonProps }: NewButtonProps) => (
  <div>
    <a href={url}>
      <Button>
        {text}
      </Button>
    </a>
  </div>
);

例如，我不需要在那个Button内编写disable = {disabled}的代码，因为它已经从该库中内置了。

西拉杰·阿拉姆

使用extends关键字将自己的道具添加到库组件的现有道具中。

import * as React from "react";
import { Button, ButtonProps } from "library/buttons";

interface NewButtonProps extends ButtonProps {
  text: string;
  url: string;
}

export const NewButton:React.FC<NewButtonProps> = ({ text, url, ...libraryButtonProps }) => (
  <div>
    <a href={url}>
      <Button {...libraryButtonProps} >
        {text}
      </Button>
    </a>
  </div>
);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。