连接在 Redux-react 中无法使用 Stateless 组件
Connect not working with StateLess component in Redux-react
我正在从其他组件调度一个操作,并且存储正在使用svgArr
属性进行更新,但是尽管以下无状态组件connect'ed
存储,但当存储更改时svgArr
它不会更新。
它是无状态组件的行为方式吗?还是我做错了什么?
const Layer = (props) => {
console.log(props.svgArr);
return (<div style = {
{
width: props.canvasWidth,
height: props.canvasWidth
}
}
className = {
styles.imgLayer
} > hi < /div>);
};
connect((state) => {
return {
svgArr: state.svgArr
};
}, Layer);
export default Layer;
您似乎正在导出图层,而不是图层组件的连接版本。
如果您查看 redux 文档:https://github.com/reactjs/react-redux/blob/master/docs/api.md#inject-dispatch-and-todos
它应该是这样的
function mapStateToProps(state) {
return {svgArr: state.svgArr}
}
export default connect(mapSTateToProps)(Layer)
这是对代码的重写
import {connect} from 'react-redux';
// this should probably not be a free variable
const styles = {imgLayer: '???'};
const _Layer = ({canvasWidth}) => (
<div className={styles.imgLayer}
style={{
width: canvasWidth,
height: canvasWidth
}}
children="hi" />
);
const Layer = connect(
state => ({
svgArr: state.svgArr
})
)(_Layer);
export default Layer;
如果你想连接无状态函数,你应该把它包装成 另一个常量:
const Layer = (props) => {
return (
<div >
</div>
);
};
export const ConnectedLayer = connect(mapStateToProps)(Layer);
这里在 react native 中使用带有功能组件的 redux
从 'react-redux' 导入 { useSelector }
;const variable = useSelector(state => state.user.variable)
此外,还可以传递具有功能组件的多个状态对象。
import {connect} from 'react-redux';
const PartialReview = ({auth, productreview}) => (
<div className="row">
<h2>{auth.uInfo._ubase}<h2>
<p>{productreview.review_description}
</div>
);
const mapStateToProps = (state) => {
return {auth: state.auth,productreview: state.productreview}
};
export default connect(mapStateToProps)(PartialReview)
相关文章:
- React重新渲染但未显示正确的组件
- 不能从angular2中的子组件指定父组件中的数组
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- React组件等待所需道具进行渲染
- 如何创建带有插槽的vue js组件预加载程序
- KnockoutJS-组件-多个实例
- 如何更改reactjs中外部/独立组件的状态或属性
- 如何在react js中将值从一个组件发送到另一个组件
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- React组件-设置页面标题
- 我的shareService在angular 2中发送值工作正常,但当我渲染我的另一个组件时,会获得默认值
- 如何在salesforce aura闪电组件中使用jQuery.val()
- 为react组件传递道具的最佳方式
- [Vue warn]:未能解析组件
- 如何控制组件'的createContent函数被激发
- react组件中的绑定方法
- 如何在react js中移动第二个组件
- 多个组件是如何实现的
- 组件生命周期问题/无法处理未定义的问题
- 连接在 Redux-react 中无法使用 Stateless 组件