我的服务器具有如下代码:
<ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider>
<Layout> 显然有更多的组件嵌套。
<Layout>
我在下面有这样的课程:
import React from 'react'; export default React.createClass({ render: function(){ var classes = [ 'js-select-product', 'pseudo-link' ]; if (this.props.selected) { classes.push('bold'); } return ( <li className="js-product-selection"> <span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}>{this.props.name}</span> </li> ); } });
我真正想做的而不是this.props.onClick调度一个事件以在reducer中设置状态。我已经在网上找到了一些有关上下文的东西,但是由于该功能已经消失或没有消失,我收到了很多评论。
this.props.onClick
编辑 我看到此连接方法,但我可能发誓我读过不要connect在子组件中使用。
connect
您太在意子组件了。您应该对应用程序进行结构设计,以使您具有已连接的组件和未连接的组件。未连接的组件本质上应该是无状态的纯函数,它们通过props满足所有要求。连接的组件应使用该connect功能将redux状态映射到prop,并将redux调度程序映射到prop,然后负责将这些prop传递给子组件。
一个应用程序中可能有很多连接的组件,而很多未连接的组件。这篇文章(由redux的创建者)将对其进行更详细的讨论,并讨论负责实际显示UI的未连接(哑)组件,以及负责组成未连接的组件的已连接(智能)组件。
一个示例可能是(使用某些新语法):
class Image extends React { render() { return ( <div> <h1>{this.props.name}</h1> <img src={this.props.src} /> <button onClick={this.props.onClick}>Click me</button> </div> ); } } class ImageList extends React { render() { return ( this.props.images.map(i => <Image name={i.name} src={i.src} onClick={this.props.updateImage} />) ); } } const mapStateToProps = (state) => { return { images: state.images, }; }; const mapDispatchToProps = (dispatch) => { return { updateImage: () => dispatch(updateImageAction()), }; }; export default connect(mapStateToProps, mapDispatchToProps)(ImageList);
在此示例中,ImageList是一个已连接组件,并且Image是一个未连接组件。
ImageList
Image