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

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) {
...
添加回答
舉報(bào)