Question

我正在尝试制作一个传递给react-redux的connect函数的组件。该组件如下：

interface ITestProps {
  id: number
}

class TestComponent extends React.Component<ITestProps, {}> {
  render() {
    return (<div>
      {this.props.name}
    </div>)
  }
}

mapStateToProps(state) {}
mapDispatchToProps(dispatch) {}

let ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(TestComponent)

如果我像这样呈现ConnectedComponent

，上面的代码似乎有效

<ConnectedComponent></ConnectedComponent>

即没有id道具。不应该抛出错误，因为ConnectedComponent只是TestComponent的连接形式，而TestComponent应该包含ITestProps形式的道具。这是它应该如何表现或我做错了什么。

Answer 1

我不确定为什么打字不能单独从演示组件中推断出类型，但是如果在连接中输入ownProps它将起作用 - >

let ConnectedComponent = connect<{}, {}, ITestProps>(
  mapStateToProps,
  mapDispatchToProps
)(TestComponent)

如果在mapDispatchToProps中键入ownProps，它也可以推断出来 - ＆gt;

mapStateToProps(state, ownProps: ITestProps) {}

Answer 2

这是正确的行为。 connect（）将返回一个新的容器组件，它将TestComponent包装为子组件。

这是源代码的一部分

class Connect extends Component {
...
    render() {
        const selector = this.selector
        selector.shouldComponentUpdate = false

        if (selector.error) {
          throw selector.error
        } else {
          return createElement(WrappedComponent, 
              this.addExtraProps(selector.props))
        }
    }
...
}

但是你可以像Radio-（以及StateProps和DispatchProps的接口）那样指定容器道具的接口。您可以从接受TStateProps，TDispatchProps和TOwnProps的类型定义中看到，并将返回ComponentDecorator

export declare function connect<TStateProps, TDispatchProps, TOwnProps>(
    mapStateToProps?: MapStateToProps<TStateProps, TOwnProps> | MapStateToPropsFactory<TStateProps, TOwnProps>,
    mapDispatchToProps?: MapDispatchToProps<TDispatchProps, TOwnProps> | MapDispatchToPropsFactory<TDispatchProps, TOwnProps>,
    mergeProps?: MergeProps<TStateProps, TDispatchProps, TOwnProps>,
    options?: Options
): ComponentDecorator<TStateProps & TDispatchProps, TOwnProps>;

Answer 3

在类中包含一个构造函数，如下所示：

constructor(props) {
  super(props)
}

没有构造函数，道具不会被加载

而不是

let ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(TestComponent)

我添加了（显然必须在连接函数之前定义mapStateToProps＆amp; mapDispatchToProps）

@connect(mapStateToProps, mapDispatchToProps)

上面

class TestComponent extends React.Component<ITestProps, {}> {

React-Redux连接打字稿中的问题

3 个答案: