帶有參數的onClick函數在redux「presentation」組件中

將對象作爲參數傳遞給redux「presentation component」中的函數的最佳方法是什麼？我有<BookList />容器組件。在BookList中，我爲每本書呈現<BookListRow/>演示文稿組件。帶有參數的onClick函數在redux「presentation」組件中

我想在每個BookListRow中刪除一個按鈕。所以我這樣做：

const BookListRow = ({book, deleteBook}) => { 
    return (
    <tr> 
     <td> 
     <button className="btn btn-sm btn-danger" 
       onClick={() => {deleteBook(book}} 
     > 
      <i className="glyphicon glyphicon-remove"></i> 
     </button> 
     </td> 
     <td><a href={book.watchHref} target="_blank">Watch</a></td> 
     <td><Link to={'/book/' + book.id}>{book.title}</Link></td> 
     <td>{book.authorId}</td> 
     <td>{book.category}</td> 
     <td>{book.length}</td> 
    </tr> 
); 
};

This Works！但是我讀到最好避免JSX中的箭頭函數，因爲性能不佳。那麼更好的方法是什麼？

來源

2017-03-17 olefrank

傳遞的onClick功能下降，而不是在'mapDispatchToprops'或'mergeProps'結合，如果你需要的'stateProps'。 –

@MartinMazzaDawson：我不明白這將如何改變deleteBook（）傳遞給BookListRow的方式...你能提供一個如何做到這一點的例子嗎？ – olefrank

由於'deleteBook'已定義，爲什麼不直接使用 '的onClick =「deleteBook（{}書）」' 只是一個想法 – bluehipy

你可以使用一個類成分：

class BookListRow extends React.Component { 
    onBtnClick =() => { 
    this.props.deleteBook(this.props.book); 
    }; 

    render() { 
    return (
     ... 
     onClick={this.onBtnClick} 
     ... 
    ) 
    } 
}

如果你想使用無狀態的功能組件，我認爲你可以使用記憶化來優化

我寫了概念的一個非常簡單的證明這裏：http://codepen.io/CodinCat/pen/NpwLRE?editors=0011

真正的onclick函數將只聲明一次。我們將它們保存爲Map，以便每次父組件重新呈現時，我們都可以重用它們。

上面的例子只是一個非常簡單的PoC。它只適用於從家長傳遞的onClick方法不會動態更改。

有一些記憶化的庫，例如https://github.com/caiogondim/fast-memoize.js

來源

2017-03-17 09:35:29 CodinCat

中聲明內聯函數的不好的做法，我想這可能是一個解決方案。但它不正確。我的意思是，BookListRow更多的是呈現/狀態更少的組件，只是呈現列表中的每一行。我想把所有的邏輯放在最上面的容器組件中。 – olefrank

它正在做同樣的事情：'onClick = {（）=> {deleteBook（book）}'。沒有額外的邏輯添加 – CodinCat

噢，我明白了。似乎工作。對不起，我只是在學習react和redux :) 但是，將BookListRow保留爲「啞」組件是不可能的？ – olefrank

帶有參數的onClick函數在redux「presentation」組件中

回答

相關問題