通過道具參數在映射時在React.js中起作用

當我通過組件渲染方法中的道具進行映射時，是否可以將prop值傳遞給函數。我忘記了這樣做的正確方法。例如，我有一個類別標籤控件，它只是列出了一些名稱的類別，但onClick我想爲個別類別執行一些功能。通過道具參數在映射時在React.js中起作用

var React = require("react"); 

var CategoryTags = React.createClass({ 

    propTypes: { 
    categories: React.PropTypes.array.isRequired 
    }, 

    render: function() { 

     var categoryRows = this.props.categories.map(function (c, i) { 

     return (
      <button onClick={ this.linkToCategory.bind(name) } > 
       {c.name} 
      </button> 
     ); 

     }.bind(this)); 

    return (
     <span>{categoryRows}</span> 
    ); 

    }, 

    linkToCategory: function (c) { 
    console.log(c); 
    } 

});

因此，在這個例子中，雖然測繪雖然類，我想在各個類別的名稱來傳遞，所以我可以解析的鏈接。當然，對象有一個鏈接屬性是有意義的，但在這種情況下它沒有。類別

實例對象被傳遞到組件道具

categories = [{'name': 'cat1'}, {'name': 'cat2'}];

來源

2015-05-07 steven iseki

綁定內.map的功能是不是一個好主意，因爲你總是要通過一項新的功能組件，即使沒有其他道具改變。這意味着即使它不是必須的，它也會被重新渲染。

但不管怎麼說，你的代碼的問題是，

沒有變name。
您錯誤地使用了.bind。

應將呼叫

this.linkToCategory.bind(this, c.name)

通過綁定.bind的第一個參數是this的價值，而不是第一個參數（你應該知道，因爲你正在使用.bind(this)爲好）。

您可以在MDN documentation中瞭解更多關於.bind的信息。

來源

2015-05-07 00:59:07

謝謝，這是在.bind方法我有它的'.bind（c.name）'一個錯字，但我忘了傳作爲第一個參數。 –

當您需要在通過道具進行映射時需要調用某個函數或者使用其他方法時，是否有React文檔介紹如何避免重新渲染？ –

我所做的只是創建另一個接受回調的組件。例如。你可以擁有你自己的Button組件，它接受'name'和'onClick'處理程序作爲prop，並且當按鈕被點擊時它簡單地將'name'道具傳遞給處理程序。 –

您也可以從事件處理函數返回一個函數：

var CategoryTags = React.createClass({ 

    propTypes: { 
    categories: React.PropTypes.array.isRequired 
    }, 

    render: function() { 

     var categoryRows = this.props.categories.map(function (c, i) { 

     return (
      <button onClick={this.linkToCategory(c)} > 
       {c.name} 
      </button> 
     ); 

     }.bind(this)); 

    return (
     <span>{categoryRows}</span> 
    ); 

    }, 

    linkToCategory: function (c) { 
     return() => { 
      console.log(c); 
     } 
    } 

});

來源

2017-02-14 21:12:18 shenku

通過道具參數在映射時在React.js中起作用

回答

相關問題