带有参数的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”组件中

回答

相关问题