我正在try 将一些用更老的版本(我认为是14或16)编写的ReactJS代码转换为18,并且代码多次使用pros.Child,这在较新版本的ReactJS中已被删除.我已经找到了很多解决这个问题的教程,but I can only find ones that refer to functional components, not classes.

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.pros.Child转换为在ReactJS18中工作?我在网上找到的所有方法都涉及将子元素直接传递到组件中,但只有当它是一个功能组件,而不是一个类(据我所知)时,这才有效.

NOTE:这段代码不是我的,正因为如此,我试图尽可能地减少更改.如果代码中有与此问题无关的问题,请不要提出,除非它们会直接影响this.pros.Child的问题.

推荐答案

您的代码完全可以在运行时运行.这只是一个打字错误.

Reaction没有删除this.props.children,但是在前面的代码中有一个错误,因为React.Component的第一个参数是props 的类型.在那里,你没有定义任何props ,甚至连子元素们也没有.因此,打字编译器会警告您:Property 'children' does not exist on type 'Readonly<{}>'.ts(2339)

如果正确定义了类型,错误就会消失.看看this playground个.

您可以将子项指定为命名props 或在标记中指定:

  <SystemStatusContainer> This is children </SystemStatusContainer>
  <SystemStatusContainer children="This is children too!" />

Javascript相关问答推荐

React状态变量在使用++前置更新时引发错误

我应该在redux reducer中调用其他reducer函数吗?

使用javascript将Plotly Expandable Sparkline转换为HighCharter Plot在bslib卡中

google docs boldText直到按行执行应用脚本错误

在nextjs服务器端api调用中传递认证凭证

MathJax可以导入本地HTML文档使用的JS文件吗?

如何调用名称在字符串中的实例方法?

在286之后恢复轮询

如何将Cookie从服务器发送到用户浏览器

使用GraphQL查询Uniswap的ETH价格

Websocket错误—有一个或多个保留位开启:reserved1 = 1,reserved2 = 0,reserved3 = 0

覆盖TypeScrip中的Lit-Element子类的属性类型

使用js构造一个html<;ath&>元素并不能使其正确呈现

为什么客户端没有收到来自服务器的响应消息?

为什么云存储中的文件不能公开使用?

为什么当我更新数据库时,我的所有组件都重新呈现?

将多个文本框中的输出合并到一个文本框中

Socket.IO在刷新页面时执行函数两次

如何在尚未创建的鼠标悬停事件上访问和着色div?

将延迟加载的模块转换为Eager 加载的模块