javascript - 如何在react中的单个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

你为什么要这么做？这不是 react 的工作原理。应该有一个安装点，所有其他组件都应该位于该安装点下

因此，在您的情况下，当您渲染 Newad 时，它会自动调用在 Newad 内声明的 Ads 。

如果您想列出多个广告，请从 NewAd 将参数传递给您的添加组件，而不是通过不同的 ID 再次呈现它。