第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何使用 {children} 將 React Component 道具傳遞給子函數(shù)?

如何使用 {children} 將 React Component 道具傳遞給子函數(shù)?

冉冉說 2022-06-16 15:14:39
我是 React 的新手,所以這可能很明顯,但我不能通過 prop 傳遞給從其父級(jí)創(chuàng)建組件的函數(shù)。我可以將道具傳遞給子組件,但同樣不適用于函數(shù)。我有<Subscription>它可以從它的父級(jí)傳遞這樣的參數(shù)post:<Subscription auth={auth} stripeAmount={post.amount} stripePlanId={post.planid}/>這將創(chuàng)建一個(gè) Stripe 訂閱。我想限制訂閱以訂閱stripePlanId我通過以下方式訂閱的內(nèi)容:class Subscription extends React.Component {  // https://stripe.com/docs/checkout#integration-custom  componentDidMount() {    this.stripeCheckout = window.StripeCheckout.configure({      ...etc...      email: this.props.auth.email,    })  }  newSubscription = () => {    var stripePlanId = this.props.stripePlanId;    this.stripeCheckout.open({      amount: this.props.stripeAmount, // in cents      description: this.props.stripePlanId,      token: function(token){        createSubscription(token, stripePlanId)      }    })  } ..etc..這很好用。但是現(xiàn)在要通過 stripePlanId 我不知道如何stripePlanId通過它,因?yàn)樗ㄟ^函數(shù)呈現(xiàn) - 這個(gè){children}參數(shù)似乎只在函數(shù)中傳遞,并且嘗試添加參數(shù)會(huì)導(dǎo)致錯(cuò)誤,它們不是它期望的函數(shù)根據(jù)傳遞的參數(shù)采取行動(dòng):const FireflySubscription = ({children}) => (  <FirebaseAuth>    { ({isLoading, error, auth}) => {      if (error || isLoading || !auth) {        //it pushes these arguments to the parent function        return children({           error,          isLoading,          subscription: null,        })      }      // the issue - how to populate this?      const stripePlanId = ""        // when working this should return the subscription for only this planId      if (stripePlanId) {        return <FirestoreCollection        path="subscriptions"        filter={[['createdBy', '==', auth.uid], ['stripePlanId','==', stripePlanId]]}      >        { ({error, isLoading, data}) => {          return children({            error,            isLoading,            subscription: data.length > 0 ? data : null,          })        }}      </FirestoreCollection>      }      return <FirestoreCollection        path="subscriptions"        filter={['createdBy', '==', auth.uid]}      >任何線索都非常感謝!如果有幫助,我正在改編的原始代碼來自https://github.com/sampl/firefly 。
查看完整描述

2 回答

?
蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊

通過您引用的存儲(chǔ)庫,您似乎正在FireflySubscription從 Subscription 組件中進(jìn)行渲染,例如


class Subscription extends React.Component {

    // other code here


    render() {

       return (

           <FireflySubscription>

               { ({error, isLoading, subscription}) => {

                   /*Some components here*/

               }}

           </FireflySubscription>

       )

    }

}

考慮到上述情況,最簡(jiǎn)單的解決方案是將stripePlanIdas 作為 prop 傳遞給FireflySubscription 組件,并在組件內(nèi)與子組件一起接收它


現(xiàn)在它stripePlanId是在組件內(nèi)部計(jì)算的Subscription,它可以很容易地FireflySubscription直接從父級(jí)傳遞給子級(jí),而不必?fù)?dān)心它會(huì)通過 FireflySubscription 路由


所以解決方案看起來像


class Subscription extends React.Component {

    // other code here


    render() {

       return (

           <FireflySubscription stripePlanId={this.props.stripePlanId}>

               { ({error, isLoading, subscription}) => {

                   // stripePlanId can be passed on to any children here using this.props.stripePlanId directly

                   /*Some components here*/

               }}

           </FireflySubscription>

       )

    }

}

現(xiàn)在在 FireflySubscription 中,您將使用它作為


const FireflySubscription = ({children, stripePlanId}) => (

  <FirebaseAuth>

    { ({isLoading, error, auth}) => {

      if (error || isLoading || !auth) {

        //it pushes these arguments to the parent function

        return children({ 

          error,

          isLoading,

          subscription: null,

        })

      }


      if (stripePlanId) {

        return <FirestoreCollection

        path="subscriptions"

        filter={[['createdBy', '==', auth.uid], ['stripePlanId','==', stripePlanId]]}

      >

        { ({error, isLoading, data}) => {

          return children({

            error,

            isLoading,

            subscription: data.length > 0 ? data : null,

          })

        }}

      </FirestoreCollection>


      }


      return <FirestoreCollection

        path="subscriptions"

        filter={['createdBy', '==', auth.uid]}

      >

        { ({error, isLoading, data}) => {

          return children({

            error,

            isLoading,

            subscription: data.length > 0 ? data : null,

          })

        }}

      </FirestoreCollection>


    }}

  </FirebaseAuth>

)


查看完整回答
反對(duì) 回復(fù) 2022-06-16
?
慕虎7371278

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊

使用渲染道具


術(shù)語“render prop”指的是一種在 React 組件之間共享代碼的技術(shù),使用值為函數(shù)的 prop。


帶有 render prop 的組件接受一個(gè)函數(shù),該函數(shù)返回一個(gè) React 元素并調(diào)用它,而不是實(shí)現(xiàn)自己的渲染邏輯。


ParentPost 組件:


const ParentPost = () => {

    <Subscription auth={auth} stripeAmount={post.amount} stripePlanId={post.planid}>

        {(stripePlanId) => <FireflySubscription stripePlanId={stripePlanId}/>}

    </Subscription>

};

訂閱組件:在您的渲染方法中,stripePlanId作為道具傳遞給children


class Subscription extends React.Component {

  // https://stripe.com/docs/checkout#integration-custom

  componentDidMount() {

    this.stripeCheckout = window.StripeCheckout.configure({

      // ...etc...

      email: this.props.auth.email

    });

  }


  newSubscription = () => {

    var stripePlanId = this.props.stripePlanId;

    this.stripeCheckout.open({

      amount: this.props.stripeAmount, // in cents

      description: this.props.stripePlanId,

      token: function(token) {

        createSubscription(token, stripePlanId);

      }

    });

  };

  

  render() {

      <div>

          ...

          {this.props.children(this.props.stripePlanId)}

          ...

      </div>

  }

}

FireflySubscription 組件:在這里,stripePlanId像這樣從父級(jí)接收:。


const FireflySubscription = ({children, stripePlanId}) => (

    <FirebaseAuth>

        {({isLoading, error, auth}) => {

            if (error || isLoading || !auth) {

                //it pushes these arguments to the parent function

                return children({

                    error,

                    isLoading,

                    subscription: null,

                })

            }


            

            //const stripePlanId = stripePlanIdFromParent; // dont need this as we are destructuring from props


            // when working this should return the subscription for only this planId

            if (stripePlanId) {

            ...


查看完整回答
反對(duì) 回復(fù) 2022-06-16
  • 2 回答
  • 0 關(guān)注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)