[英]how to render multiple copies of this component in react jsx
I want to create another copy of this component function and each time a new copy is created i want to change the <h3>
and <p>
tag 我想创建此组件函数的另一个副本,每次创建新副本时,我都想更改<h3>
和<p>
标记
function Ads(product) {
return(
<div className = "row" id="user-ads">
<div className = "col-sm-6 col-md-5">
<div className = "thumbnail">
<img src = "img/img1.jpg" alt = "Generic placeholder thumbnail" />
</div>
<div className = "caption">
<div className="border">
<h3>{product.title}</h3>
<p>{product.desc}</p>
<button className = "btn btn-primary" role = "button" data-toggle="modal" data-target="#view-detail">View Details
</button>
</div>
</div>
</div>
</div>
);
}
ReactDOM.render(<Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum"/>, document.getElementById('ads'));
Something like this should work: 这样的事情应该起作用:
var configObjects = [
{
desc: "Lorem ipsum jipsum Lorem ipsum jipsum",
img: "img1.jpg",
title: "PlayStation 4"
},
{
desc: "Lorem ipsum jipsum Lorem ipsum jipsum",
img: "img2.jpg",
title: "PlayStation 5"
},
{
desc: "Lorem ipsum jipsum Lorem ipsum jipsum",
img: "img3.jpg",
title: "PlayStation 6"
}
]
function Ads() {
var multipleAds = AdsAssembly(configObjects);
return(
<div>{multipleAds}</div>
);
}
function AdsAssembly(array) {
var jsxArray = [];
array.forEach(function (adObject, index) {
jsxArray.push(AdsContent(adObject));
})
return jsxArray;
}
function AdsContent(object) {
return (
<div className = "row" id="user-ads">
<div className = "col-sm-6 col-md-5">
<div className = "thumbnail">
<img src ={"img/" + object.img} alt = "Generic placeholder thumbnail" />
</div>
<div className = "caption">
<div className="border">
<h3>{object.title}</h3>
<p>{object.desc}</p>
<button className = "btn btn-primary" role = "button" data-toggle="modal" data-target="#view-detail">View Details
</button>
</div>
</div>
</div>
</div>
)
}
ReactDOM.render(<Ads/>, document.getElementById('ads'));
You can use the configuration array to dynamically populate each ad you would like to display. 您可以使用配置数组动态填充要展示的每个广告。 Cheers! 干杯!
Alternatively you could pass the configs as a property like so: 或者,您可以将配置作为属性传递,如下所示:
ReactDOM.render(<Ads configs={configObjects} />, document.getElementById('ads'));
Then use them like this: 然后像这样使用它们:
function Ads(props) {
var multipleAds = AdsAssembly(props.configs);
return(
<div>{multipleAds}</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.