将子节点传递给由打字稿编写的功能性反应组件

Question

children当使用命名函数而不是箭头函数时，在以打字稿编写的 React 组件中使用关键字传递子节点的正确方法是什么？

在箭头函数中我可以写这样的东西：

const MyComponent: React.FC = ({children}) => {
   return <div>{children}</div>
}

export default MyComponent;

但是我如何用函数做同样的事情normal呢？我试过

import React from "react";

function MyComponent({children}): JSX.Element{
   return <div>{children}</div>
}

export default MyComponent;

但是 eslint 会抛出以下错误：

var children: any
Object pattern argument should be typed. eslint(@typescript-eslint/explicit-module-boundary-types)
'children' is missing in props validation eslint(react/prop-types)

我可以通过从 React 导出来消除错误ReactNode。

import React, { ReactNode } from "react"

function MyComponent({children}: ReactNode): JSX.Element{
   return <div>{children}</div>
}

export default MyComponent;

但这是否被认为是解决此问题的可行方法，或者还有其他被认为是最佳实践的方法吗？

Answer 1

您需要为孩子们​​提供正确的类型。

像这样的东西应该有效..

function MyComponent({ children }: {children: React.ReactNode}): JSX.Element {
  return <div>{children}</div>;
}