在 React Typescript 中使用 props 作为 prop 传递组件

Question

我正在用 Typescript 学习 React 并遇到了障碍。 我正在尝试将具有道具的子组件传递给另一个子组件，如下所示：

const About = () => {

  const skills: string[] = ['a', 'b', 'c', 'd', 'e', 'f']
  const columns: number = 2
  const title: string = "ABOUT"
  const text: string = `Lorem Ipsum.`

  return (
    <Card
      text={text}
      title={title}
      skillsComponent={<Skills skills={skills} columns={columns}/>}
    >
    </Card>
  );
};

并像这样使用Skills组件：

const Card: FC<CardProps>  = ({ title, text, skillsComponent }): JSX.Element => {

  return (
    <div>
      <div className="container">
        <div className="title">{title}</div>
        <div className="underline"></div>
        <div className="card">
          <div className="text">
            {text}
          </div>
        </div>
      </div>
      {skillsComponent}
    </div>
  )
}

{skillsComponent}给出错误Type 'Element' is not assignable to type 'FC<SkillsProps>'. 不确定这里的最佳解决方案是什么。

Answer 1

您不需要理会FC<CardProps>或定义返回类型，因为这将被推断出来。 通常当你构建一个卡片组件时，你可以只使用一个children Prop，如下所示。

const About = () => {

  const skills: string[] = ['a', 'b', 'c', 'd', 'e', 'f']
  const columns: number = 2
  const title: string = "ABOUT"
  const text: string = `Lorem Ipsum.`

  return (
    <Card
      text={text}
      title={title}
    ><Skills skills={skills} columns={columns}/>
    </Card>
  );
};

interface CardProps {title:string, text:string, children:React.Node}

const Card  = ({ title, text,children }:CardProps) => {
  return (
    <div>
      <div className="container">
        <div className="title">{title}</div>
        <div className="underline"></div>
        <div className="card">
          <div className="text">
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}