如何在 ReactJS 18 的类组件中访问 props.children-js教程-PHP中文网

如何在 reactjs 18 的类组件中访问 props.children

本文针对 ReactJS 18 中类组件访问 props.children 时可能遇到的 TypeScript 类型问题，提供了清晰的解决方案。通过正确定义组件的 Props 类型，显式声明 children 属性，可以避免类型检查错误，并确保在类组件中正常使用 props.children。文章还对比了 React 17 和 React 18 中关于 children 属性的类型定义差异，帮助开发者更好地理解问题根源。

在 ReactJS 中，props.children 是一个非常重要的属性，它允许我们将组件嵌套在其他组件内部，并将嵌套的内容作为 children 传递给父组件。虽然 React 18 并没有移除 props.children，但在使用 TypeScript 的类组件中，如果不正确地定义 Props 类型，可能会遇到类型错误。

问题分析

当你在 React 18 中使用 TypeScript 类组件时，可能会遇到类似 "Property 'children' does not exist on type 'Readonly'.ts(2339)" 的错误。这是因为在 React 18 的类型定义中，React.Component 的 Props 类型不再默认包含 children 属性。这意味着，如果你没有在 Props 类型中显式声明 children 属性，TypeScript 编译器会认为该属性不存在。

解决方案

解决这个问题的方法是在定义类组件的 Props 类型时，显式声明 children 属性。以下是示例代码：

import React from 'react';

interface SystemStatusContainerProps {
  children: React.ReactNode;
  // 其他 Props 属性...
}

interface SystemStatusContainerState {
  status: systemStatuses;
  pollStatus: boolean;
}

enum systemStatuses {
  online = 'online',
  offline = 'offline',
  update = 'update'
}

class SystemStatusContainer extends React.Component {
  state: SystemStatusContainerState = {
    status: systemStatuses.online,
    pollStatus: true,
  };

  timer: NodeJS.Timeout | undefined;

  componentDidMount() {
    this.timer = setTimeout(() => {
      this.setState({ status: systemStatuses.offline });
    }, 2000);
  }

  componentWillUnmount() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }

  render() {
    const { status } = this.state;

    if (status === systemStatuses.offline) {
      return <div>System Unavailable Modal</div>; // Replace with your actual component
    } else if (status === systemStatuses.update) {
      return <div>System Status Modal</div>; // Replace with your actual component
    } else {
      return {this.props.children}>;
    }
  }
}

export default SystemStatusContainer;

代码解释：

定义 Props 类型： 我们创建了一个名为 SystemStatusContainerProps 的接口，并在其中定义了 children 属性，类型为 React.ReactNode。 React.ReactNode 可以表示任何可以作为 React 组件子元素的类型，包括字符串、数字、React 元素等。
类型声明： 在 SystemStatusContainer 类组件的定义中，我们将 SystemStatusContainerProps 作为第一个类型参数传递给 React.Component。这样，TypeScript 编译器就知道 this.props 具有 children 属性。
使用 props.children： 在 render 方法中，我们可以像以前一样使用 this.props.children 来访问子元素。

使用示例

import SystemStatusContainer from './SystemStatusContainer';

function App() {
  return (
    <systemstatuscontainer><p>This is a child element.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2500" title="度加AI"><img
														src="https://img.php.cn/upload/manual/000/969/633/6a61700fe297c535.jpg" alt="度加AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/gongju/2500" title="度加AI" class="overflowclass">度加AI</a>
													<p class="overflowclass">度加AI官网入口，百度官方 AIGC 创作平台，支持 AI 成片、AI 生文、数字人、声音克隆、配音字幕与智能剪辑等在线创作能力。</p>
												</div>
												<a rel="nofollow" href="/xiazai/gongju/2500" title="度加AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      <button>Click me</button>
    </systemstatuscontainer>
  );
}

export default App;

在这个示例中，

和

React 17 和 React 18 的类型差异

在 React 17 中，React.Component 的 Props 类型默认包含了 children 属性，这意味着即使你没有显式声明 children 属性，也可以直接使用 this.props.children。

// React 17 的类型定义 (简化)
class Component<p> {
  readonly props: Readonly</p><p> & Readonly;
}</p>

而在 React 18 中，React.Component 的 Props 类型不再默认包含 children 属性。

// React 18 的类型定义 (简化)
class Component<p> {
  readonly props: Readonly</p><p>;
}</p>

这个变化导致了在 React 18 中使用 TypeScript 类组件时，需要显式声明 children 属性。

总结

通过显式声明 children 属性，可以解决在 React 18 的 TypeScript 类组件中访问 props.children 时遇到的类型问题。理解 React 17 和 React 18 在类型定义上的差异，可以帮助开发者更好地适应 React 的版本升级。记住，在 TypeScript 中，显式地定义类型可以提高代码的可读性和可维护性，并减少潜在的错误。