如何通過多個參數在部件功能在陣營

如何通過多個參數中的部件的功能在陣營如何通過多個參數在部件功能在陣營

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

只有上述代碼取的值第一個參數

來源

2016-09-20 Osama Xäwãñz

無國籍反應的組分只接收一個參數，它包含了所有的道具的對象：

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}) { 
    // ... 
}

來源

2016-09-20 18:20:33

TypeError：product_title未定義 –

必須在每個地方都使用'props.title' **而不是**'product_title'。我認爲這很清楚。 –

感謝您的幫助，現在工作得很好 –

在您提供的示例中，product_title.desc應具有您正在查找的值。當你打電話給<Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum"/>時，title和desc都會作爲一個對象的屬性傳遞給你的組件函數，所以你的函數中都可以使用你指定的第一個參數的名字，在你的情況下這個名字是product_title。

來源

2016-09-20 18:19:49 slugo

如何通過多個參數在部件功能在陣營

回答

相關問題