如何在反应中呈现单个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 再次呈现它。

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