当函数组件向嵌套的类组件传递 prop（如 url）时，若类组件未监听 prop 变化，其内部 state 不会自动同步更新，导致 ui 滞后；需通过 componentdidupdate 手动同步 props 到 state。
当函数组件向嵌套的类组件传递 prop（如 url）时，若类组件未监听 prop 变化，其内部 state 不会自动同步更新，导致 ui 滞后；需通过 componentdidupdate 手动同步 props 到 state。
在 React 中，类组件的 constructor 仅在初始化时执行一次，因此将 props.data 赋值给 this.state.url 后，后续父组件传入的新 data 值不会自动触发 state 更新——React 不会“重调用”构造函数，也不会自动将新 prop 同步到 state。这正是你遇到的问题：MyPDF 渲染的仍是初始 URL，而 MyApp 中的 url 状态已正确更新。
解决的关键是利用类组件的生命周期方法 componentDidUpdate，在每次组件更新后对比前后 props，显式调用 setState 同步变化：
import React from "react";
interface Props {
data: string;
}
interface State {
url: string;
}
class MyPDF extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
// 初始化 state，基于初始 props
this.state = { url: props.data };
}
// ✅ 关键：监听 data prop 变化并更新 state
componentDidUpdate(prevProps: Props) {
if (this.props.data !== prevProps.data) {
this.setState({ url: this.props.data });
}
}
render() {
return <div>PDF (Class): {this.state.url}</div>;
}
}
export default MyPDF;⚠️ 注意事项：
- 类型安全：务必为 Props 显式声明 data: string，避免使用 any；否则 TypeScript 无法校验 prevProps.data 的存在性与类型。
- 避免重复 setState：componentDidUpdate 中必须加条件判断（this.props.data !== prevProps.data），防止无变化时触发不必要的更新，引发无限循环。
- 不推荐 getDerivedStateFromProps：虽然它也可用于 props → state 同步，但在此简单场景下过于复杂且易出错；componentDidUpdate 更直观、可控。
- 跨语言兼容性：JSX/TSX 混合项目（如父组件 JS、子组件 TSX）完全可行，只要构建工具（如 Webpack + Babel 或 Vite）支持 TypeScript 编译即可，无需额外配置。
总结：类组件不会自动响应父组件 prop 变更，必须主动在 componentDidUpdate 中实现“受控同步”。这是遗留类组件与现代函数组件共存时的经典适配模式，既无需重写整个组件，又能保证数据流的一致性与可预测性。
