基于对象值绘制时创建引导卡网格的问题
基于对象值绘制时创建引导卡网格的问题
提问于 2021-11-17 06:21:10
我正在创建一个徒步旅行应用程序，允许用户将小径添加到公共存储库中。
我有一个组件来呈现一个引导卡，并通过道具传递给它。我使用.row和.col将它们对齐成一个漂亮的网格。
为了从对象中的所有项目生成卡片，我从该对象读取数据(使用map() )，然后创建一个引导卡片网格。下面是它的样子，使用以下代码：
Trails.js:
<div id="trails" className="container rounded border shadow">
<Card className="trailCard" />
</div>Card.js:
class Card extends Component {
render() {
return (
<div className="card-deck row">
<div className="col-lg-4 card-col">
<div className="card">
<img className="card-img-top" alt="" src="https://s24953.pcdn.co/blog/wp-content/uploads/2018/01/Templates-Guide-header-1-1024x576.png" />
<div className="card-body">
<h5 className="card-title">Card Title</h5>
<p className="card-text"><b>Description: </b>This is a longer card test. This is a longer card test.</p>
<p className="card-text"><b>Location: </b> This is a longer card test.</p>
</div>
</div>
</div>
<div className="col-lg-4 card-col">
<div className="card">
<img className="card-img-top" alt="" src="https://s24953.pcdn.co/blog/wp-content/uploads/2018/01/Templates-Guide-header-1-1024x576.png" />
<div className="card-body">
<h5 className="card-title">Card Title</h5>
<p className="card-text"><b>Description: </b>This is a longer card test. This is a longer card test.</p>
<p className="card-text"><b>Location: </b> This is a longer card test.</p>
</div>
</div>
</div>
[etc..]
</div>
当我从对象读取值并使用map()呈现新的s时，如下所示：
Trails.js:
<div id="trails" className="container rounded border shadow">
<div className="card-deck-row">
{this.props.trailList.map((item) => {
return (
<div className="col-lg-4 card-col">
<Card
className="trailCard"
trailName={item.trailName}
trailType={item.trailType}
trailDescription={item.trailDescription}
trailLocation={item.trailLocation}
/>
</div>
)
})}
</div>
</div>Card.js:
class Card extends Component {
render() {
return (
<div className="card">
<img className="card-img-top" alt="" src="https://s24953.pcdn.co/blog/wp-content/uploads/2018/01/Templates-Guide-header-1-1024x576.png" />
<div className="card-body">
<h5 className="card-title">{this.props.trailName}</h5>
<p className="card-text"><b>Location: </b>{this.props.trailLocation}</p>
<p className="card-text"><b>Category: </b>{this.props.trailType}</p>
<p className="card-text"><b>Description: </b>{this.props.trailDescription}</p>
</div>
</div>
)
}
}
export default Card;
如何使第二个示例像第一个示例中的网格一样简单？
回答 1
Stack Overflow用户
发布于 2021-11-17 07:23:03
使用<div className="card-deck row">而不是<div className="card-deck-row">。希望这能解决你的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69999726
复制相关文章
相似问题
腾讯云开发者
