如何让这些组件按钮在正确的卡片组件中呈现？

Question

我目前有这个仪表板组件，我可以在其中传递一个<Payments /> 组件，如下所示：

import React from "react";
import Payments from "./Payments";

const Dashboard = () => {
  return (
    <h1>
      Dashboard
    </h1>
    <Payments />
  );
};

export default Dashboard;

这会呈现一个付款按钮，但我需要每个产品一个按钮。现在在 Payments 组件内部，它看起来像这样：

import React, { Component } from "react";
import StripeCheckout from "react-stripe-checkout";

class Payments extends Component {
  render() {
    return (
      <div>
        <StripeCheckout
          description='Sunny Sampler $20'
          amount={2000}
          shippingAddress
          zipCode={true}
          token={(token) => console.log(token)}
          stripeKey={process.env.REACT_APP_STRIPE_KEY}
        />
      </div>
    );
  }
}

export default Payments;

但是如果我添加一个额外的StripeCheckout 组件并更改description 属性，amount 属性：

class Payments extends Component {
  render() {
    return (
      <div>
        <StripeCheckout
          description='Sunny Sampler $20'
          amount={2000}
          shippingAddress
          zipCode={true}
          token={(token) => console.log(token)}
          stripeKey={process.env.REACT_APP_STRIPE_KEY}
        />
        <StripeCheckout
          description='Sun Shoots $20'
          amount={2000}
          shippingAddress
          zipCode={true}
          token={(token) => console.log(token)}
          stripeKey={process.env.REACT_APP_STRIPE_KEY}
        />
      </div>
    );
  }
}

我可以有第二个按钮，但这只会并排显示，它们都会。

如何在Card 组件中渲染这些StripeCheckout 组件，根据它们的description 属性对应它们？

Answer 1

好的，我解决这个问题的方法是创建各种按钮组件：

<HalfPound /> <SunnySampler /> <Grasses />

所以在每个组件中都有StripCheckout 组件，如下所示：

import React, { Component } from "react";
import StripeCheckout from "react-stripe-checkout";

class SunnySampler extends Component {
  render() {
    return (
      <div>
        <StripeCheckout
          description='Sunny Sampler box $20'
          amount={2000}
          shippingAddress
          zipCode={true}
          token={(token) => console.log(token)}
          stripeKey={process.env.REACT_APP_STRIPE_KEY}
        />
      </div>
    );
  }
}

export default SunnySampler;

Grasses 和 HalfPound 具有类似的设置，但 description 和 amount 属性的值不同。

然后我将它放在Dashboard 组件内的一个数组中，如下所示：

const tiers = [
  {
    title: "Half pound boxes",
    price: "10",
    description: [
      "Sunflower Shoots",
      "Pea Shoots",
      "Radish Shoots",
      "Broccoli Shoots",
    ],
    buttonText: <HalfPound />,
    buttonVariant: "outlined",
  },
  {
    title: "Grasses",
    subheader: "Tray",
    price: "15",
    description: ["Wheatgrass", "Barleygrass"],
    buttonText: <Grasses />,
    buttonVariant: "contained",
  },
  {
    title: "Sunny Sampler Box",
    price: "20",
    description: [
      "6oz Sunflower",
      "2oz Broccoli",
      "3oz Sweet Pea",
      "2oz Radish",
    ],
    buttonText: <SunnySampler />,
    buttonVariant: "outlined",
  },
];

最后我像这样在 JSX 中映射它们：

 <Container maxWidth='md' component='main'>
        <Grid container spacing={5} alignItems='flex-end'>
          {tiers.map((tier) => (
            // Enterprise card is full width at sm breakpoint
            <Grid
              item
              key={tier.title}
              xs={12}
              sm={tier.title === "Enterprise" ? 12 : 6}
              md={4}
            >
              <Card>
                <CardHeader
                  title={tier.title}
                  subheader={tier.subheader}
                  titleTypographyProps={{ align: "center" }}
                  subheaderTypographyProps={{ align: "center" }}
                  action={tier.title === "Pro" ? <StarIcon /> : null}
                  className={classes.cardHeader}
                />
                <CardContent>
                  <div className={classes.cardPricing}>
                    <Typography component='h2' variant='h3' color='textPrimary'>
                      ${tier.price}
                    </Typography>
                    <Typography variant='h6' color='textSecondary'>
                      /each
                    </Typography>
                  </div>
                  <ul>
                    {tier.description.map((line) => (
                      <Typography
                        component='li'
                        variant='subtitle1'
                        align='center'
                        key={line}
                      >
                        {line}
                      </Typography>
                    ))}
                  </ul>
                </CardContent>
                <CardActions>
                  <Button fullWidth color='primary'>
                    {tier.buttonText}
                  </Button>
                </CardActions>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Container>

如果有人看到更好的解决方案，或者可以预见此解决方案的问题或错误，请随时提供您自己的解决方案。