将道具传递给react-redux容器组件


82

我有一个在React Native Navigator组件中创建的react-redux容器组件。我希望能够将导航器作为道具传递给此容器组件,以便在其演示组件中按下按钮之后,它可以将一个对象推入导航器堆栈。

我想这样做而无需手写react-redux容器组件给我的所有样板代码(并且也不要错过react-redux也会给我的所有优化)。

容器组件代码示例:

const mapStateToProps = (state) => {
    return {
        prop1: state.prop1,
        prop2: state.prop2
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onSearchPressed: (e) => {
            dispatch(submitSearch(navigator)) // This is where I want to use the injected navigator
        }
    }
}

const SearchViewContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(SearchView)

export default SearchViewContainer

我希望能够从我的导航器renderScene函数中调用这样的组件:

<SearchViewContainer navigator={navigator}/>

在上面的容器代码中,我需要能够从mapDispatchToProps函数内部访问此传递的prop 。

我不想将导航器存储在redux状态对象上,也不想将prop传递给表示组件。

有什么方法可以将prop传递给此容器组件吗?另外,我还有其他替代方法吗?

谢谢。

Answers:


119

mapStateToPropsmapDispatchToProps两者取ownProps作为第二个参数。

[mapStateToProps(state, [ownProps]): stateProps] (Function):
[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

参考


14

您可以传入第二个参数,通过该参数,mapStateToProps(state, ownProps)您可以访问在mapStateToProps中传递到组件中的道具


我如何在mapDispatchToProps中访问它?
迈克尔

2
@Michael以相同的方式,您可以使用第二个参数
Conor Hastings

6

使用打字稿进行此操作时有一些陷阱,所以这里有个例子。

一个陷阱是,当您仅使用dispatchToProps(并且不映射任何状态道具)时,重要的是不要忽略状态参数(可以用下划线前缀命名)。

另一个陷阱是必须使用仅包含传递的道具的接口来键入ownProps参数-这可以通过将props接口拆分为两个接口来实现,例如

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);

可以通过传递单个参数来声明该组件:

<MyComponent value={event} />

1

使用装饰器(@)

如果您使用的是装饰器,则以下代码为您要在Redux连接中使用装饰器的示例提供了示例。

@connect(
    (state, ownProps) => {
        return {
            Foo: ownProps.Foo,
        }
    }
)
export default class Bar extends React.Component {

如果现在检查,this.props.Foo您将看到从使用Bar组件的位置添加的道具。

<Bar Foo={'Baz'} />

在这种情况下this.props.Foo,字符串将是“ Baz”

希望这可以澄清一些事情。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.