如何呈現這個組件的多個副本中反應JSX

Question

我要創建的每個創建一個新的副本，我想改變<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')); 

Answer 1

喜歡的東西時該組件功能的另一個副本和這應該工作：

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

您可以使用配置數組來動態填充您要顯示的每個廣告。乾杯!

另外，您可以通過CONFIGS作爲屬性，像這樣：

ReactDOM.render(<Ads configs={configObjects} />, document.getElementById('ads')); 

然後使用它們像這樣：

function Ads(props) { 
     var multipleAds = AdsAssembly(props.configs); 
     return(
     <div>{multipleAds}</div> 
    ); 
    }