如何在React的組件函數中傳遞多個參數

Question

如何在React的組件函數中傳遞多個參數

 function Ads(product_title, description) {
    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.title}</h3>
         <p>{description.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'));

上面的代碼僅采用第一個參數的值

Answer 1

在您提供的示例中， product_title.desc應該具有您要查找的值。 當您調用<Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum"/> ， title和desc都將作為對象的屬性傳遞到組件函數，因此在您的廣告中都可以使用函數具有您指定的第一個參數的名稱，在您的情況下為product_title 。

Answer 2

無狀態React組件僅接收一個參數，該參數包含所有道具：

function Ads(props) {
  // access props.title
  //        props.desc

  // ...
}

如果您將JSX實際轉換為以下內容，則可能會變得更加明顯：

// Before:
<Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum"/>
// After:
React.createElement(
  Ads,
  { title: "PlayStation 4", desc: "Lorem ipsum jipsum Lorem ipsum jipsum" }
);

---

一種常見的模式是使用解構來直接訪問道具：

function Ads({title, desc}) {
  // ...
}