3

我有以下示例：

import * as React from "react";
import { connect } from 'react-redux';


interface IMessage {
    message : string;
}

class SayMessage extends React.Component<IMessage, {}>{
    render () {
        return (<div>{this.props.message}</div>);
    }
}


function mapStateToProps( state : any ) : IMessage {
  return { message : "Hello, world" };
}
const SayMessageContainer = connect(mapStateToProps)(SayMessage);

export class SomeOtherView extends React.Component<{},{}>{
    render (){
        return (<SayMessageContainer/>);
    }
}

引发<SayMessageContainer/>：

类型“IntrinsicAttributes & IntrinsicClassAttributes & IMessage & { children?: ReactElement...”中缺少属性“消息”。

应该如何更改这个示例，以便 Connect 可以通过 mapStateToProps 提供道具？

注意/可能的提示：SayMessageContainer 是 SayMessage 类型，这对我来说似乎不合适。

打字稿 2.0.0

编辑

编写自己的容器似乎可以解决它，但我宁愿弄清楚如何正确使用connect

class SayMessageContainer extends React.Component<{},{}>{
    render () {
        const props = mapStateToProps({});
        return (
            <SayMessage {...props}/>
        );
    }
}

编辑 2 使用以下类型：

"react-redux": "registry:npm/react-redux#4.4.0+20160614222153", 
"react-router": "registry:npm/react-router#2.4.0+20160628165748", 
"react-router-redux": "registry:npm/react-router-redux#4.0.0+20160602212457",
"redux": "registry:npm/redux#3.0.6+20160214194820"
4

2 回答 2

4

您必须为每种类型的道具创建一个接口，然后将其传递给连接方法：

// Regular props
interface OwnProps {}

// Props from the mapStateToProps method
interface StateProps {
    message: string;
}

// Props from the mapDispatchToProps method
interface DispatchProps {}

要创建组件，您可以使用特定类型：

type SayMessageProps = OwnProps & StateProps & DispatchProps;

class SayMessage extends React.Component<SayMessageProps, {}>{
    render () {
        return (<div>{this.props.message}</div>);
    }
}

然后在使用 connect 时：

connect<StateProps, DispatchProps, OwnProps>(mapStateToProps)(SayMessage);

（您也可以使用 {} 代替空接口）

于 2016-09-13T08:02:46.293 回答
1

我所做的是 ownProps在 mapStateToProps 上输入或连接。如果你有道具，你希望父母发送像 -

interface IMyOwnProps{
   thing1;
   thing2;
}

那么你可以通过像这样调用 connect 来帮助 TypeScript 解决这个问题......

const SayMessageContainer = connect<{}, {}, IMyOwnProps>(mapStateToProps)(SayMessage);

在 mapStateToProps 上键入 ownProps 也足够了。在您的情况下，由于您没有任何道具，因此执行以下操作可能就足够了，但我目前无法对其进行测试：

const SayMessageContainer = connect<{},{},{}>(mapStateToProps)(SayMessage);
于 2016-07-21T01:42:14.413 回答