如何呈现在单个id元素在反应

Question

如何渲染速度比在单一ID组件的更多，我知道，单个ID无法呈现多个组件两个组件，我也尝试getElementByClass但结果却是相同的

function Ads(product) { 
     return(
      <div className={product.className} id="user-ads"> 
     <div className = "col-sm-6 col-md-5"> 
      <div className = "thumbnail"> 
      <img src={product.image} alt="product-image"/> 
      </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> 

     ); 
    } 

    function Newad(product) { 
     return (
      <Ads title="Forza" desc="rndom text rndom text rndom text rndom text" image="img/img2.jpg" /> 
     ); 

} 

ReactDOM.render(<Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="img/img1.jpg" className="row" />, document.getElementById('all_ads')); 
ReactDOM.render(<Newad />, document.getElementById('all_ads')); 

Answer 1

你为什么要这么做？这不是如何反应的作品。应该有一个单一的安装点，所有其他组件应该在该安装点

所以在你的情况下，当你渲染Newad它会自动调用这是在Newad内声明。

如果要列出多个广告传递参数给你的附加组件从NewAd不会再次渲染它通过不同的ID。

Answer 2

要么以下工作两种解决方案供您打算如何使用呢？

而且，你会发现这个问题非常有用：Return multiple elements inside React.render()

解决方案1：http://codepen.io/PiotrBerebecki/pen/RGoJvB

function Newad(product) { 
    return (
    <div className={product.className} id="user-ads"> 
     <div className="col-sm-6 col-md-5"> 
     <div className="thumbnail"> 
      <img src={product.image} alt="product-image"/> 
     </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> 
); 
} 

function Ads() { 
    return (
    <div> 
     <Newad title="Forza" desc="rndom text rndom text rndom text rndom text" image="https://placeimg.com/200/200/nature" className="row" /> 
     <Newad title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="https://placeimg.com/200/200/tech" className="row" /> 
    </div> 
); 
} 

ReactDOM.render(<Ads />, document.getElementById('all_ads')); 

解决方案2：http://codepen.io/PiotrBerebecki/pen/NRbBrA
或者，也可以在对象的数组存储你的广告然后使用map()方法遍历它们。

下面是代码：

const ADS = [ 
    { 
    title: "Forza", 
    desc: "rndom text rndom text rndom text rndom text", 
    image: "https://placeimg.com/200/200/nature", 
    className: "row" 
    }, 
    { 
    title: "PlayStation 4", 
    desc: "Lorem ipsum jipsum Lorem ipsum jipsum", 
    image: "https://placeimg.com/200/200/tech", 
    className: "row" 
    },  
]; 


function Ads() { 
    return (
    <div> 
     {ADS.map((product, index) => { 
     return (   
      <div key={index} className={product.className} id="user-ads" > 
      <div className="col-sm-6 col-md-5"> 
       <div className="thumbnail"> 
       <img src={product.image} alt="product-image"/> 
       </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>    
     ); 
     })} 
    </div> 
); 
} 


ReactDOM.render(<Ads />, document.getElementById('all_ads'));