Как передать более одного аргумента в функции компонента в 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

Stateless Реагировать компоненты получают только один аргумент, объект, который содержит все реквизиты:

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

    // ... 
} 

Возможно, что становится все более очевидным, если вы look at what the JSX is actually converted to:

// 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" } 
); 

---

общий шаблон следует использовать destructuring, чтобы получить прямой доступ к реквизитам:

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

Answer 2

В приведенном примере product_title.desc должно иметь значение, которое вы ищете. Когда вы вызываете <Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum"/>, как title, так и desc будут переданы вашей функции компонента в качестве свойств объекта, поэтому обе будут доступны в вашей функции с именем указанного вами первого параметра, который в вашем случае равен product_title.