は、私は単一のIDが複数の構成要素をレンダリングすることができないことを知っている

Question

どのように単一のIDでコンポーネントのよりレンダリングする反応において単一のid要素に2つの構成要素をレンダリングするためにどのように、私はまた、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

なぜあなたはそれをしたいですか？それは反応がどのように働くかではありません。 1つのマウントポイントがあり、他のすべてのコンポーネントがそのマウントポイントの下にある必要があります

Newadをレンダリングすると、Newad内で宣言されているAdsが自動的に呼び出されます。

パラメータを渡された複数の広告を、追加のコンポーネントにリストする場合は、NewAdから別のIDで再度レンダリングする必要はありません。

Answer 2

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