函数组件嵌套类组件，状态变更后类组件未重渲染如何解决？

我的应用99%是函数组件，但需要使用嵌套在函数组件<MyApp>中的遗留类组件<MyPDF>（重写成本过高）。父函数组件将状态值url传递给该类组件，但当父组件中url变更时，变更未传递到类组件，类组件也未重新渲染。类组件用TypeScript编写，父组件是JavaScript，不确定是否有影响。

相关代码 #

myapp.js #

import React, { useState } from "react";
import MyPDF from "./mypdf.tsx";

function MyApp() {
  const [url, setURL] = useState("https://initialpdf.com");
  const onClick = () => {
    setURL("https://newpdf.com");
  };
  console.log("url", url); // 此处url能正常变更
  return (
    <>
      <h1>This is my app</h1>
      <MyPDF data={url} />
      <p>PDF (Function): {url}</p>
      <button onClick={onClick}>Change URL</button>
    </>
  );
}
export default MyApp;

mypdf.tsx #

import React from "react";

interface State {
  url: string;
}
class MyPDF extends React.Component<{}, State> {
  state = { url: "" };
  constructor(props: any) {
    super(props);
    this.state.url = props.data;
  }

  render() {
    return <div>PDF (Class): {this.state.url}</div>; // 此处this.state.url为何不更新？
  }
}
export default MyPDF;

解决方案 #

问题核心：原类组件仅在初始化时（constructor阶段）将props赋值给state，而constructor只会执行一次，后续父组件props更新不会触发state同步。TypeScript与JavaScript混合开发不影响props传递，无需担心语言差异。

方法一：直接使用props渲染（推荐，无需维护内部state） #

如果类组件不需要基于url做额外的状态逻辑，直接用this.props.data渲染即可，同时修正TypeScript的props类型定义：

import React from "react";

// 明确props类型，避免使用any
interface MyPDFProps {
  data: string;
}

class MyPDF extends React.Component<MyPDFProps> {
  render() {
    return <div>PDF (Class): {this.props.data}</div>;
  }
}
export default MyPDF;

方法二：通过生命周期监听props更新同步state #

如果必须维护类组件内部state（比如有其他依赖逻辑），使用componentDidUpdate监听props变化并更新state：

import React from "react";

interface MyPDFProps {
  data: string;
}
interface MyPDFState {
  url: string;
}

class MyPDF extends React.Component<MyPDFProps, MyPDFState> {
  state = { url: this.props.data };

  componentDidUpdate(prevProps: MyPDFProps) {
    // 对比新旧props，避免不必要的state更新
    if (prevProps.data !== this.props.data) {
      this.setState({ url: this.props.data });
    }
  }

  render() {
    return <div>PDF (Class): {this.state.url}</div>;
  }
}
export default MyPDF;

内容的提问来源于stack exchange，提问作者Calseon