Paypal React在更改金额后显示额外的按钮。

Question

WITHOUT react-paypal-button-v2 ~~~有一个60KB的头。

类似问题 此处 但他们建议 react-paypal-button-v2

我想做一个反应和paypal的按钮，在道具变化时改变计费金额，我调用以下组件的道具价格，每次价格变化时，我想重新渲染按钮来更新实际价格。我调用了以下组件的道具价格，每次价格变化时，我想重新渲染按钮来更新实际价格。没有react-paypal-button-v2的情况下，我想做一个有价格的按钮。

const PaypalForm = props => {
  let paypalRef = useRef();

  useEffect(() => {      
    window.paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                description: "test",
                amount: {
                  currency_code: "USD",
                  value: props.price
                }
              }
            ]
          });
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
          console.log(order);
        },
        onError: err => {
          setError(err);
          console.error(err);
        }
      })
      .render(paypalRef.current);
  }, [props.price]);

  return (
    <Row className="justify-content-center">
      {error && <div>Uh oh, an error occurred! {error.message}</div>}
      <div ref={paypalRef} />
    </Row>
  );
};

除了每次更换道具时在旧按钮的底部都会创建并添加一个新按钮外，一切都在工作。我希望我的新按钮能取代旧按钮。在没有使用react-paypal-button-v2的情况下。

Answer 1

类似的东西。

useEffect(() => {
    if(window.myButton) window.myButton.close();
    window.myButton = window.paypal
      .Buttons({
        createOrder: (data, actions) => {
          return actions.order.create({
            purchase_units: [
              {
                description: "test",
                amount: {
                  currency_code: "USD",
                  value: props.price
                }
              }
            ]
          });
        },
        onApprove: async (data, actions) => {
          const order = await actions.order.capture();
          console.log(order);
        },
        onError: err => {
          setError(err);
          console.error(err);
        }
      });
    window.myButton.render(paypalRef.current);

然而，你做 不 其实需要重新渲染价格变化的按钮!

你可以做 value: document.getElementById('...').value 类似