如何从HOC中交还孩子的价值

如何解决如何从HOC中交还孩子的价值

我希望有一个按钮可以提交以划分特定数量，该输入基于可通过键入或单击增加/减少按钮来更改的输入。我在高阶组件上具有递增/递减功能，但无法将其提交到条纹按钮（据我所知为子项）

以下相关代码：

withCheckout（HOC）：

import React from "react"

const UpdatedComponent = (OriginalComponent) => {
    class NewComponent extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                count: 1 
            }
            this.handleChange = this.handleChange.bind(this)
        }


        increment = () => {
            this.setState(prevState => {
                return { count: prevState.count + 1}
            })
        }

        decrease = () => {
            this.setState(prevState => {
                return { count: prevState.count - 1 }
            })
        }


        handleChange(event) {
            this.setState({
                count: parseInt(event.target.value)
            });
        }

        render() {
            return <OriginalComponent count={this.state.count} increment={this.increment} decrease={this.decrease} handleChange={this.handleChange} />
        }
    }
    return NewComponent
}

export default UpdatedComponent

结帐：

import React,{ useState } from "react"
import { loadStripe } from "@stripe/stripe-js"
import UpdatedComponent from "./withCheckout"

const buttonStyles = {
  fontSize: "13px",textAlign: "center",color: "#000",padding: "12px 60px",boxShadow: "2px 5px 10px rgba(0,.1)",backgroundColor: "rgb(255,178,56)",borderRadius: "6px",letterSpacing: "0.2ch",display: "block",margin: "1.5em auto 1.5em auto",}

const buttonDisabledStyles = {
  opacity: "0.5",cursor: "not-allowed",}

let stripePromise
const getStripe = () => {
  if (!stripePromise) {
      stripePromise = loadStripe("KEY_HERE")
  }
  return stripePromise
}

const Checkout = props => {

  const [loading,setLoading] = useState(false)

  const redirectToCheckout = async event => {
    event.preventDefault()
    setLoading(true)

    const stripe = await getStripe()
    const { error } = await stripe.redirectToCheckout({
      mode: "payment",lineItems: [{ price: "PRICE_ID_HERE",quantity: props.count }],successUrl: `http://localhost:8000/page-2/`,cancelUrl: `http://localhost:8000/`,shippingAddressCollection: {
        allowedCountries: ['PT'],}
    })

    if (error) {
      console.warn("Error:",error)
      setLoading(false)
    }
  }

  return (
    <button
      disabled={loading}
      style={
        loading ? { ...buttonStyles,...buttonDisabledStyles } : buttonStyles
      }
      onClick={redirectToCheckout}
    >
          Comprar {props.count}
    </button>
  )
}

export default UpdatedComponent(Checkout)

示例： See this image

当我将输入更改为7时，我希望按钮文本为“ Comprar 7”，并希望在striperedirect函数中提交数量：7。我认为问题与设置道具的方式有关，因为我的柜台工作得很好，道具以const {count} = this.props的形式传递。我还应该添加Counter.js代码吗？