亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

冉冉說 2022-06-16 15:14:39
我是 React 的新手,所以這可能很明顯,但我不能通過 prop 傳遞給從其父級創建組件的函數。我可以將道具傳遞給子組件,但同樣不適用于函數。我有<Subscription>它可以從它的父級傳遞這樣的參數post:<Subscription auth={auth} stripeAmount={post.amount} stripePlanId={post.planid}/>這將創建一個 Stripe 訂閱。我想限制訂閱以訂閱stripePlanId我通過以下方式訂閱的內容: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..這很好用。但是現在要通過 stripePlanId 我不知道如何stripePlanId通過它,因為它通過函數呈現 - 這個{children}參數似乎只在函數中傳遞,并且嘗試添加參數會導致錯誤,它們不是它期望的函數根據傳遞的參數采取行動: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貢獻1810條經驗 獲得超4個贊

通過您引用的存儲庫,您似乎正在FireflySubscription從 Subscription 組件中進行渲染,例如


class Subscription extends React.Component {

    // other code here


    render() {

       return (

           <FireflySubscription>

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

                   /*Some components here*/

               }}

           </FireflySubscription>

       )

    }

}

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


現在它stripePlanId是在組件內部計算的Subscription,它可以很容易地FireflySubscription直接從父級傳遞給子級,而不必擔心它會通過 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>

       )

    }

}

現在在 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>

)


查看完整回答
反對 回復 2022-06-16
?
慕虎7371278

TA貢獻1802條經驗 獲得超4個贊

使用渲染道具


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


帶有 render prop 的組件接受一個函數,該函數返回一個 React 元素并調用它,而不是實現自己的渲染邏輯。


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像這樣從父級接收:。


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) {

            ...


查看完整回答
反對 回復 2022-06-16
  • 2 回答
  • 0 關注
  • 159 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號