Styled-components React HTML 元素工廠

Question

我想創建一個組件來處理具有相同屬性/邏輯的多個 HTML 元素。

import React from 'react';
import styled from 'styled-components';

interface GridProps {
  htmlElement: 'div' | 'main' | 'header',
}

const GridFactory = (props: GridProps) => {
  switch (props.htmlElement) {
    case 'header':
      return styled.header``;
    case 'main':
      return styled.main``;
    case 'div': default :
      return styled.div``;
  }
}

export const Test = () => (
  <GridFactory htmlElement='div'>
    <p>content...</p>
  </GridFactory>
)

它因該錯誤而失敗：

Type '{ children: Element; htmlElement: "div"; }' is not assignable to type 'IntrinsicAttributes & GridProps'.
  Property 'children' does not exist on type 'IntrinsicAttributes & GridProps'.

嘗試的第一個技巧

向 GridProps 添加顯式 children 道具：

interface GridProps {
  htmlElement: 'div' | 'main' | 'header',
  children?: React.ReactNode | React.ReactNode[];
}

它給出了相應的錯誤：

'GridFactory' cannot be used as a JSX component.
  Its return type 'StyledComponent<"header", DefaultTheme, {}, never> | StyledComponent<"div", DefaultTheme, {}, never>' is not a valid JSX element.
    Type 'StyledComponent<"header", DefaultTheme, {}, never>' is not assignable to type 'Element | null'.
      Type 'String & StyledComponentBase<"header", DefaultTheme, {}, never> & NonReactStatics<never, {}>' is missing the following properties from type 'Element': type, props, key

我怎樣才能實現它？

Answer 1

由於您的styled.head返回組件類型而不是React.Element因此您可以改進您的內容，如下所示：

將您的組件的返回類型指定為無狀態功能組件React.SFC ，您也可以從中受益，無需指定children道具，因為它是SFC類型的一部分：

const GridFactory: React.SFC<GridProps> = (props) => { ...

然后將樣式組件分配為功能組件，例如Header ：

const Header: React.SFC = styled.header``;

總而言之，完整的代碼將是：

interface GridProps {
  htmlElement: 'div' | 'main' | 'header',
}

const Header: React.SFC = styled.header``;

const GridFactory: React.SFC<GridProps> = (props) => {
  switch (props.htmlElement) {
    case 'header':
      return <Header />;

    // More to come

    default: return null
  }
}

Answer 2

該錯誤表明您無法將道具“孩子”傳遞給您的組件，因為它沒有在道具接口聲明中提供該類型。 事實上，您的 GridProps 接口並沒有聲明這樣的屬性。 children 是您在將子組件傳遞給父組件時“設置”的道具，就像在您的示例中一樣

export const Test = () => (
  <GridFactory htmlElement='div'>
    <p>content...</p> //This is passed as the children prop of your GridFactory
  </GridFactory>
)

要使 typescript 停止抱怨它，您應該將接口聲明更改為

interface GridProps {
  htmlElement: 'div' | 'main' | 'header';
  children: React.Node | React.Node[];
}

現在你的 Prop 類型允許你傳遞一個 children 道具