将props传递给react-redux容器组件

作者: v-star*위위
发布时间: 2025-07-16 01:02:46 (1月前)
转自：

4 条回复

0#
回复此人
离线请留言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用打字稿进行此操作时会有一些问题，所以这是一个例子。 </p> <P> 一个问题是当你只使用dispatchToProps（而不是映射任何状态道具）时，重要的是不要省略状态参数（它可以用下划线前缀命名）。 </p> <P> 另一个问题是，必须使用仅包含传递道具的接口来键入ownProps参数 - 这可以通过将您的道具接口拆分为两个接口来实现，例如 </p> <pre> <code> interface MyComponentOwnProps { value: number; } interface MyComponentConnectedProps { someAction: (x: number) => void; } export class MyComponent extends React.Component< MyComponentOwnProps & MyComponentConnectedProps > { ....// component logic } const mapStateToProps = ( _state: AppState, ownProps: MyComponentOwnProps, ) => ({ value: ownProps.value, }); const mapDispatchToProps = { someAction, }; export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); </code> </pre> <P> 可以通过传递单个参数来声明组件： </p> <pre> <code> <MyComponent value={event} /> </code> </pre> </DIV>

编辑
1#
回复此人
⑩Ⅵ嵗Ｄ夨憶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以传入第二个参数 <code> mapStateToProps(state, ownProps) </code> 这将使您可以访问传递给mapStateToProps中组件的道具 </p> </DIV>

编辑
2#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H1> 使用装饰器（@） </H1> <P> 如果您正在使用装饰器，下面的代码给出了一个示例，如果您想为redux连接使用装饰器。 </p> <pre> <code> @connect( (state, ownProps) => { return { Foo: ownProps.Foo, } } ) export default class Bar extends React.Component { </code> </pre> <P> 如果你现在检查 <code> this.props.Foo </code> 你会看到从哪里添加的道具 <code> Bar </code> 使用了组件。 </p> <pre> <code> <Bar Foo={'Baz'} /> </code> </pre> <P> 在这种情况下 <code> this.props.Foo </code> 将是字符串'Baz' </p> <P> 希望这能澄清一些事情。 </p> </DIV>

编辑

登录后才能参与评论