如何在反应jsx中呈现该组件的多个副本答案

【问题标题】：how to render multiple copies of this component in react jsx如何在反应jsx中呈现该组件的多个副本
【发布时间】：2017-01-28 21:06:31
【问题描述】：

我想创建此组件函数的另一个副本，每次创建新副本时我都想更改<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'));

【问题讨论】：

你的问题不是很清楚。您想如何更改标签？你想完成什么？

标签： javascript html reactjs jsx

【解决方案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'));

您可以使用配置数组来动态填充您想要展示的每个广告。干杯！

或者，您可以将配置作为属性传递，如下所示：

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

然后像这样使用它们：

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

【讨论】：