Javascript 如何使用{children}将React组件prop传递给子函数？

我是新手，所以这可能是显而易见的，但我不能将道具传递给从其父级创建组件的函数

我可以将道具传递给子组件，但同样的方法不适用于函数

我可以从它的父帖子中通过这样的论点：

这将创建条带订阅。我想将订阅限制为订阅stripePlanId，我通过以下方式进行订阅：

类订阅扩展了React.Component{ // https://stripe.com/docs/checkoutintegration-custom 组件安装{ this.stripeCheckout=window.stripeCheckout.configure{ 等 电子邮件：this.props.auth.email， } } 新闻订阅==>{ var stripePlanId=this.props.stripePlanId； 这个.stripeCheckout.open{ 金额：this.props.stripeAmount，//以美分为单位 描述：this.props.stripePlanId， 令牌：functiontoken{ createSubscriptiontoken，stripePlanId } } } 等 这非常有效。但是现在要通过stripePlanId，我无法找到如何通过stripePlanId，因为它通过函数呈现-这个{children}参数似乎只在函数中传递，并且尝试添加参数会导致错误，它们不是它期望对传递的参数起作用的函数：

常量FireflySubscription={children}=> {{isLoading，error，auth}=>{ 如果错误| | |正在加载| |！验证{ //它将这些参数推送到父函数 返回儿童{ 错误 孤岛， 订阅：空， } } //问题-如何填充此内容？ 常量stripePlanId= //工作时，此操作应仅返回此planId的订阅 if-stripePlanId{ 回来 {{错误，正在加载，数据}=>{ 返回儿童{ 错误 孤岛， 订阅：data.length>0？数据：null， } }} } 回来 {{错误，正在加载，数据}=>{ 返回儿童{ 错误 孤岛， 订阅：data.length>0？数据：null， } }} }} 导出默认FireflySubscription 我尝试用另一种方法传递它，但范围没有传递：

getPostSubscriptions=stripePlanId=>{ 回来 //它从上面的FireflySubscription函数中获取这些参数 {{错误，正在加载，订阅}=>{ 如果错误{ 回来 } 如果卸载{ 返回加载

} 如果！订阅{ 回来 订阅付费功能

等 } 等 }} } 渲染{ 返回this.getPostSubscriptionthis.props.stripePlanId } } 非常感谢任何线索！如果有帮助的话，我正在修改的原始代码来自。

使用

术语“渲染道具”是指使用道具（其值为函数）在组件之间共享代码的技术

具有渲染属性的组件接受一个函数，该函数返回React元素并调用它，而不是实现自己的渲染逻辑

ParentPost组件：

常量ParentPost==>{ {stripePlanId=>} }; 订阅组件：在渲染方法中，将stripePlanId作为道具传递给子级

类订阅扩展了React.Component{ // https://stripe.com/docs/checkoutintegration-custom 组件安装{ this.stripeCheckout=window.stripeCheckout.configure{ //……等等。。。 电子邮件：this.props.auth.email }; } 新闻订阅==>{ var stripePlanId=this.props.stripePlanId； 这个.stripeCheckout.open{ 金额：this.props.stripeAmount，//以美分为单位 描述：this.props.stripePlanId， 令牌：functiontoken{ createSubscriptiontoken，stripePlanId； } }; }; 渲染{ ... {this.props.childrenthis.props.stripePlanId} ... } } FireflySubscription组件：在此处，从父级接收stripePlanId，如下所示：

const-FireflySubscription={children，stripePlanId}=> {{isLoading，error，auth}=>{ 如果错误| | |正在加载| |！验证{ //它将这些参数推送到父函数 返回儿童{ 错误 孤岛， 订阅：空， } } //const stripePlanId=stripePlanIdFromParent；//不需要这个，因为我们正在从道具中解构 //工作时，此操作应仅返回此planId的订阅 if-stripePlanId{ ...

---

查看您引用的存储库，它看起来像是从内部呈现FireflySubscription 订阅组件类

class Subscription extends React.Component {
    // other code here

    render() {
       return (
           <FireflySubscription>
               { ({error, isLoading, subscription}) => {
                   /*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>
)

---

对不起，我看不出这有什么帮助：我想这篇文章可能会对你有所帮助

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