React Typescript 兒童道具在類型道具中定義，但不知何故未拾取

Question

我正在使用 React、TypeScript、Styled Components 和 Rollup 構建一個組件庫。 現在，我使用類型接口創建了一個 Button 組件。 然后，我將庫卷起來以在我的測試項目中本地安裝它。 然后我導入 Button 並嘗試使用它。 我為按鈕定義了兩個屬性：children 和 type。 Children 是 React.ReactNode 類型，type 是 String 類型。 現在，當我在我的測試項目中使用 Button 組件時，它一直在說以下內容：

輸入'{孩子：字符串； 類型：字符串； }' 不可分配給類型 'IntrinsicAttributes & ButtonProps'。 類型“IntrinsicAttributes & ButtonProps”上不存在屬性“children”。

下面是我的 Button 類型界面：

import React from "react";

export type ButtonProps = {
  type: String;
  children: React.ReactNode;
};

如果我的按鈕在下面：

import React from "react";
import { ButtonBase } from "./button.style";
import { ButtonProps } from "./button.types";

function getButton(type: String) {
  switch (type) {
    case "base":
      return ButtonBase;
    default:
      return ButtonBase;
  }
}

const Button = ({ type, children }: ButtonProps) => {
  const Component = getButton(type);
  return <Component>{children}</Component>;
};

export default Button;

這就是我在測試項目中使用 Button 的方式：

import { Button } from "aab-react-emerald";

function App() {
  return (
    <div className="App">
      <header className="App-header"></header>
      <Button type="base">Button</Button>
    </div>
  );
}

這是我的 ButtonBase。 它是一個 Styled 組件，它繼承了基本 Button 組件的一些樣式。 還有兩個按鈕，它們都將繼承一些默認樣式。

import styled from "styled-components";
import theme from "@theme";

const Button = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  padding: 8px 16px;
  height: 40px;
  box-shadow: none;
  font-size: 16px;
  line-height: 24px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color ${theme.transition};
  transition: ${theme.transition};
`;

export const ButtonBase = styled(Button)`
  color: white;
  background-color: ${theme.colors.g300};

  :hover {
    background-color: ${theme.colors.g200};
  }

  :active {
    background-color: ${theme.colors.g400};
  }
`;

有誰知道我應該做些什么不同的？

Answer 1

在此代碼中

<Button type="base">Button</Button>

'children' 實際上是一個字符串，而不是 ReactNode - 這就是它被拒絕的原因，類型不匹配。 如果您在類型定義中允許一個應該修復它的字符串：

children: React.ReactNode | string;

Answer 2

您可以使用React.FC類型定義組件，這會將children屬性添加到props中。 例如：

import React from "react";
import { ButtonBase } from "./button.style";
import { ButtonProps } from "./button.types";

function getButton(type: String) {
  switch (type) {
    case "base":
      return ButtonBase;
    default:
      return ButtonBase;
  }
}

// Using FC there's no need to add the children props into ButtonProps
// as it is already defined in the FC.
const Button: React.FC<ButtonProps> = ({ type, children }) => {
  const Component = getButton(type);

  return <Component>{children}</Component>;
};

export default Button;

這里有一個關於React.FC類型的有趣解釋！

Answer 3

我看過一條評論，其中孩子應該被定義為children: React.ReactNode | string; children: React.ReactNode | string; 但這不應該用作 ReactNode 還包括字符串類型作為參數，這也是一種不好的做法。

此外，這些類型由按鈕的 HTML 元素推斷。 所以不需要指定它們。

export type ButtonProps = {
  type: String;
  children: React.ReactNode;
};

另一種編寫您可能想要探索的樣式按鈕組件的方法可能是

const Button = styled.button<
  React.ComponentProps<'button'> & React.HTMLAttributes<HTMLButtonElement>
>`
 display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  padding: 8px 16px;
  height: 40px;
  box-shadow: none;
  font-size: 16px;
  line-height: 24px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color ${theme.transition};
  transition: ${theme.transition};
`;

您的實施似乎是正確的。 希望這可以幫助。