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

IT技术 reactjs react-native redux react-redux

2021-05-14 07:12:51

我有一个在 React Native Navigator 组件中创建的 react-redux 容器组件。我希望能够将导航器作为props传递给此容器组件，以便在其展示组件内按下按钮后，它可以将对象推送到导航器堆栈上。

我想这样做而无需手写 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 状态对象上，也不想将props传递给展示组件。

有没有办法可以将props传递给这个容器组件？或者，有没有我忽略的替代方法？

谢谢。

4个回答

mapStateToProps并且mapDispatchToProps都ownProps作为第二个参数。

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

供参考

您可以传入第二个参数，mapStateToProps(state, ownProps)该参数将使您可以访问传递到 mapStateToProps 中的组件的props

使用typescript执行此操作时存在一些问题，因此这是一个示例。

一个问题是当您只使用 dispatchToProps（并且不映射任何状态props）时，重要的是不要省略状态参数，（它可以用下划线前缀命名）。

另一个问题是 ownProps 参数必须使用只包含传递的 props 的接口输入——这可以通过将你的 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} />

使用装饰器 (@)

如果你正在使用装饰器，下面的代码给出了一个例子，你想在你的 redux 连接中使用装饰器。

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

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

<Bar Foo={'Baz'} />

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

希望这能澄清一些事情。

其它你可能感兴趣的问题

上一篇部分半透明物体的摄影测量下一篇如何在 123d Design 中添加公差/间隙？