盡管使用 React.FC 訪問子組件時出現 Typescript 錯誤

Question

我有一個看起來像這樣的子組件：

interface ChildProps extends AnotherInterface{
    route: string,
    exitAction: ActionCreatorWithoutPayload,
}

const ChildComponent:FC<ChildProps> = ({title, shape, route, exitAction, children}) => {
    ... other stuff
}

這個容器組件看起來像這樣：

export default connect(null, {
    exitAction,
})(ChildComponent);

但是當我嘗試像這樣渲染組件時：

<ContainerComponent
    title={action.title}
    shape={action.shape}
    route={qaction.route}
> 
<div>Some Data</div>
</ContainerComponent>

所以這給了我以下錯誤：

Type '{ children: ReactNode; title: string; shape: TActionShape; route: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Props, "title" | "shape" | "route">'.

Property 'children' does not exist on type 'IntrinsicAttributes & Pick<Props, "title" | "shape" | "route">'

當然，我正在正確導入所有內容，也沒有拼寫或語法錯誤，我上面顯示的是我嘗試做的簡化版本，以便我們可以查明根本原因。

請注意，唯一的錯誤是由於 Children 屬性，您在錯誤中看到的 rest 屬性來自 AnotherInterface。

Web 應用程序使用 React、Redux、NextJs、ReduxToolKit 和 Typescript

Answer 1

如果傳遞子組件，則父組件必須具有children: React.ReactNode或children?: React.ReactNode類型，具體取決於它是必需的還是可選的。

例如：

<ContainerComponent
    title={action.title}
    shape={action.shape}
    route={action.route}
> 
<div>Some Data</div>
</ContainerComponent>

在這里， <div>Some Data</div>將通過（而不是拋出錯誤）如果你有children: React.ReactNode在 ContainerComponent 類型中。

此外，ContainerComponent return應該有{children}或使用 React.Children。 您可以在此處閱讀有關 React.Children 的更多信息。