为什么在nextjs中呈现paypal按钮时会闪烁？

问题描述

我使用 react-paypal-button-v2 来显示 paypal 按钮，如下所示。

当窗口刷新时，只有按钮闪烁。

我认为是因为动画而不是 ssr。

我可以禁用按钮上的默认动画吗？

npx create-next-app

pages/index.js


import { PayPalButton } from "react-paypal-button-v2";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>
        Welcome to <a href="https://nextjs.org">Next.js!</a>
      </h1>
      <PayPalButton
        amount="0.01"
        onSuccess={() => {}}
        style={{ layout: `horizontal` }}
      />
    </div>
  );
}

+++ 06/28

我尝试使用状态解决它，但问题仍然存在。 ㅠㅠ

export default function Home() {
  const [isReady,setIsReady] = useState(false);

  return (
    <div className={styles.container}>
      {isReady === "true" && (
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      )}
      <PayPalButton
        amount="0.01"
        onButtonReady={() => setIsReady("true")}
        onSuccess={() => {}}
      />
    </div>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）