如何通过状态更然后一个组件的终极版

什么是我想要做什么？

我必须点击一个按钮，点击它会在其他容器/ svg标签中显示一个svg路径。

我的代码或我的代码

import { connect } from "react-redux"; 
import { BodyTemplate, Button } from "../component/svgPreview/Preview.jsx"; 
import { previewBodyTemplate } from "../modcon/Actions.js"; 

const mapStateToProps = ({ previewTemplateState }) => { 
    return ({ 
     previewTemplateState: previewTemplateState 
    }); 
}; 

const mapDispatchToProps = (dispatch) => { 
    return ({ 
     onImageClick: (value) => { 
      dispatch(previewBodyTemplate(value)); 
     } 
    }); 
}; 

/* the following code will work because we cannot export more then one by 
default **/ 

/* 
const PreviewContainer = connect(mapStateToProps, mapDispatchToProps)(Button); 
const PreviewBody = connect(mapStateToProps, mapDispatchToProps)(BodyTemplate); 
export default PreviewContainer; 
export default PreviewBody; 

*/ 


/* so i try this */ 

export const PreviewContainer = connect(mapStateToProps, mapDispatchToProps)(Button); 
export const PreviewBody = connect(mapStateToProps)(BodyTemplate);

据我knowlage我传递的状态，以两个组件，所以当一个更新的状态时，它也会随之更新。

但该文件不起作用，因为我们不直接导出它。

我是如何应对的状态传递给不止一个组件

下面

是错误，当我直接出口

来源

2016-04-24 Muhammad Asif Javed

为什么不制作两个容器，每个组件一个并单独导出它们？ – QoP

我必须将更新的状态传递给不同的组件，我需要单独的组件吗？ –

容器应该是有状态的，组件应该是无状态的，你可以阅读它@ https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.gnwcim743 – QoP

你需要创建一个父组件，这组件将包含按钮和预览组件。

const MyContainer = ({ image, onImageClick }) => (
    <div> 
    <div className="sidebar"> 
     <Button label="Preview image" onClick={onImageClick} /> 
    </div> 
    <div className="content"> 
     <Preview source={image} /> 
    </div> 
    </div> 
);

准备好容器后，需要将此组件的道具映射到来自redux的状态/动作。

const mapStateToProps = ({ image, previewTemplateState }) => { 
    return ({ 
    image: image, 
    previewTemplateState: previewTemplateState 
    }); 
}; 

const mapDispatchToProps = (dispatch) => { 
    return ({ 
    onImageClick: (value) => { 
     dispatch(previewBodyTemplate(value)); 
    } 
    }); 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(MyContainer);

现在主要的容器将接收到的数据和采取的行动，从那里你可以发送任何你需要的子组件。

按钮和预览图像组件是无状态组件，它们只接收来自父容器的道具。

来源

2016-04-24 20:49:51 Crysfel

如何通过状态更然后一个组件的终极版

回答

相关问题