如何在Props变更时重新渲染PayPalScriptProvider以替换HTML头部脚本？

我尝试在Locale（区域设置）变更时，重新渲染PayPal脚本及按钮以切换语言。原本以为React组件会在Props变更时重新渲染，但PayPalScriptProvider在HTML中添加脚本标签后，并不会随语言变更而更新。

虽然给PayPalButtons添加forceReRender={[locale]}属性能让按钮重新渲染，但脚本仍加载初始语言版本。我需要脚本也能使用正确的Props重新渲染，请问该如何实现？

代码示例 #

export default function App() {
  const [locale, setLocale] = useState('zh_HK');
  return (
    <div>
      Current Lang: {locale}
      <button onClick={() => setLocale('en_US')}>EN</button>
      <button onClick={() => setLocale('zh_HK')}>HK</button>
      <PayPalScriptProvider
        key="one-and-only"
        options={{
          locale: locale,
          'client-id': 'test',
        }}
      >
        <PayPalButtons forceReRender={[locale]} />
      </PayPalScriptProvider>
    </div>
  );
}

问题核心在于PayPalScriptProvider的固定key导致React不会重新挂载组件，进而无法重新加载对应语言的脚本。只需将key与locale绑定即可解决：

• 将PayPalScriptProvider的key值设置为locale，每次语言切换时，React会识别到组件身份变化，卸载旧实例并挂载新实例，从而重新加载对应语言的PayPal脚本。

修改后的代码 #

export default function App() {
  const [locale, setLocale] = useState('zh_HK');
  return (
    <div>
      Current Lang: {locale}
      <button onClick={() => setLocale('en_US')}>EN</button>
      <button onClick={() => setLocale('zh_HK')}>HK</button>
      <PayPalScriptProvider
        key={locale}
        options={{
          locale: locale,
          'client-id': 'test',
        }}
      >
        <PayPalButtons forceReRender={[locale]} />
      </PayPalScriptProvider>
    </div>
  );
}

原理说明 #

• React通过key属性识别组件唯一性，当key变更时，会触发组件的卸载与重新挂载流程。
• 新的PayPalScriptProvider实例会根据新的locale选项加载对应语言的脚本，PayPalButtons也会基于新脚本渲染匹配语言的按钮，实现完整的语言切换效果。

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