从装饰器(React/Redux)调用组件方法@connect

Question

我是 React 和 Redux 的新手，我有一个可能非常简单的问题，我似乎无法弄清楚：我有一个组件的以下@connect装饰器：

@connect((store) => {
let options = store.helpers.options || [];
let optionsRender = options.map((option, index) => {
return (
<div className="opt" data-slug={option.name} key={index} onClick={(e) => this.onOptionSelect(option.name)}>{option.name}</div>
)
});
return {
options: options,
optionsRender: optionsRender
}
})

我正在组件中呈现optionsRender对象，但我想为每个生成的div 添加一个 onclick 处理程序。该处理程序是组件内部的方法，但是如果我从@connect装饰器生成对象，如何适当地调用该方法？

Answer 1

您optionsRender必须是组件的一部分，而不是connect mapStateToProps定义的一部分。连接必须仅处理数据和操作，而不处理呈现逻辑

@connect((store) => {
let options = store.helpers.options || [];
return {
options: options
}
})
class App extends React.Component {
onOptionSelect = (option) => {
// do things here
}
render() {
return (
<div>
{this.props.options.map((option, index) => {
return (
<div className="opt" data-slug={option.name} key={index} onClick={(e) => this.onOptionSelect(option.name)}>
{option.name}
</div>
)
})}
</div>
)
}
}