我正在尝试将一些用旧版本(我认为是14或16)编写的ReactJS代码转换为18,代码多次使用props.children,这在ReactJS的新版本中被删除。我已经找到了很多解决这个问题的教程,但我只能找到那些引用函数组件的教程,而不是类。
export class SystemStatusContainer extends React.Component<
{},
{
status: systemStatuses;
pollStatus: boolean;
}
> {
state = {
status: systemStatuses.online,
pollStatus: true,
};
timer: NodeJS.Timeout;
.
.
.
render() {
const { status } = this.state;
if (status === systemStatuses.offline) {
return <SystemUnavailableModal />;
} else if (status === systemStatuses.update) {
return <SystemStatusModal />;
} else {
return this.props.children;
}
}
如何将底线this.props.children转换为在ReactJS 18中工作?我在网上找到的所有方法都涉及将子组件直接传递到组件中,但这只适用于函数式组件,而不是类(据我所知)。
**注意:**这段代码不是我的,正因为如此,我试图尽可能地减少更改。如果代码中存在与此问题无关的问题,请不要提出它们,除非它们会直接影响this.props.children的问题。
2条答案
按热度按时间km0tfn4u1#
你的代码完全可以在运行时运行。这只是一个打字错误。
React没有删除
this.props.children
,但是在前面的代码中有一个错误,因为React.Component
的第一个参数是props的类型。在那里,你没有定义任何 prop ,甚至没有孩子。所以typescript编译器警告你:Property 'children' does not exist on type 'Readonly<{}>'.ts(2339)
如果正确定义了类型,错误就消失了。看看this playground。
您可以将子对象指定为命名 prop 或在标记中指定:
csbfibhn2#
React 18中的更改是默认情况下从props的 type 中删除
children
(在Component
和React.FunctionComponent
[akaReact.FC
]类型中,函数组件可选地使用)。它被删除的原因是,并非所有组件都应该有子组件(考虑一个最终只呈现一个void元素的组件,如<br/>
)。如果您的组件有子组件,它将有一个包含这些子组件的
children
prop。所以我们要做的就是确保你的组件的props的类型是这样的。要使代码再次工作,请在props类型(
Component
的第一个类型参数)中声明children
。React提供了一个实用程序类型PropsWithChildren
,它将children
添加到props类型。React对PropsWithChildren
的定义如下:所以我们会在你的空props对象类型上使用它:
下面是一个非常基本的例子(在TypeScript操场上):