reactjs - 如何让这些组件按钮在正确的卡片组件中呈现?
问题描述
我目前有这个仪表板组件,我可以在其中传递一个<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>
);
}
}
我可以有第二个按钮,但这只会并排显示,它们都会。
如何根据它们的属性在与它们对应StripeCheckout
的组件中呈现这些组件?Card
description
解决方案
好的,我解决这个问题的方法是创建各种按钮组件:
<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>
如果有人看到更好的解决方案或可以预见此解决方案的问题或错误,请随时提供您自己的解决方案。
推荐阅读
- python - pandas - 使用列名重组数据框
- java - CodeCompiler - 从另一个 Java 程序编译和运行 Java 程序
- android - mediaPlayer.getDuration() 在 setDataSource 后返回 0 并导致应用程序崩溃
- vba - 无法使用 selenium VBA 从网页的下拉列表中进行选择
- javascript - 在保存时将 Canvas 图像文件名和/或位置路径存储到数据库?
- java - 如何让我的程序循环回到某个点,直到达到某个答案
- php - 将表单值插入 Wordpress 数据库表:php
- javascript - Angular 6 辅助路由
- rcppparallel - 我们可以将 Rcpp::List 或向量向量传递给 RcppParallel 函数吗?
- c++ - Qt 向另一个线程发出的信号是否在排队?