首页 文章

Redux，React，Typescript：Connect返回需要道具的视图类

提问于
浏览 次
2

我有以下示例：

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 ...''中缺少属性'message' .

如何更改此示例以便Connect可以通过mapStateToProps提供道具？

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

打字稿2.0.0

Edit

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

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

Edit 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"
reactjs typescript redux react-redux typescript2.0

2 回答

  • 0

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

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

    （您也可以使用{}而不是空接口）

    回复于
  • 4

    我所做的是在mapStateToProps或connect上键入 ownProps . 如果你有道具，你希望父母发送像 -

    interface IMyOwnProps{
   thing1;
   thing2;
}

    然后你可以通过调用connect来帮助TypeScript把这个想象出来......

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

    在mapStateToProps上键入ownProps也足够了 . 在你的情况下，由于你没有任何道具，它可能足以做到以下，但我现在无法测试它：

    const SayMessageContainer = connect<{},{},{}>(mapStateToProps)(SayMessage);
    回复于

相关问题