終極版，反應，打字稿：連接返回查看類需要道具

我有以下示例：終極版，反應，打字稿：連接返回查看類需要道具

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"

來源

2016-07-20 Andrew Carreiro

是否使用的是分型？那些在DefinitelyTyped或在npm？ –

「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「 –

根據最新的[類型]（https://github.com/andrew-w-ross/typings-react-redux/blob/master/react-redux.d.ts），」 connect（...）'（'wrapWithConnect'）是一個帶有原型'T - > T'的函數（帶'T extends React.ComponentConstructor '），使得生成的組件構造函數期望相同的一組道具，但是這個問題沒有解決，你可能需要手動處理它，也可以參考這個問題：https：//github.com/reactjs/react-redux/issues/290 –

我所做的是在mapStateToProps或連接上鍵入ownProps。如果你有道具希望父送樣 -

interface IMyOwnProps{ 
    thing1; 
    thing2; 
}

那麼你可以幫助打字稿明白這一點通過調用connect這樣的...對mapStateToProps

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

打字ownProps也足夠了。在你的情況，因爲你沒有任何道具，這可能足以做到以下幾點，但我不能在此刻測試：

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

來源

2016-07-21 01:42:14

連接在我的環境中拋出一個錯誤：「提供的參數不匹配調用目標的任何簽名。 ReactRedux.IConnectOptions）：ReactRedux.IMapDispatchToProps | Object，mergeProps ?:（stateProps：Object，dispatchProps：Object，ownProps：Object）=>對象，選項？：ReactRedux.IConnectOptions）： | React.StatelessComponent >（component：T）=> T（+1 overload）「 –

你必須創建爲每種類型的接口使用連接時

type SayMessageProps = OwnProps & StateProps & DispatchProps; 

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

然後：道具，然後將它傳遞給connect方法：

// Regular props 
interface OwnProps {} 

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

// Props from the mapDispatchToProps method 
interface DispatchProps {}

要創建組件，您可以使用特定類型的

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

（你也可以使用{}，而不是空的接口）

來源

2016-09-13 08:02:46 Bouni

當像這樣使用'connect'時，我得到與Andrew相同的錯誤。」提供的參數與調用目標的任何簽名都不匹配。（別名）connect（mapStateToProps ?: ReactRedux.IMapStateToProps，mapDispatchToProps ?: ReactRedux.IMapDispatchToProps | Object，mergeProps ?:（stateProps：Object，dispatchProps：Object，ownProps：Object）=> Object，options ?: ReactRedux.IConnectOptions）：< T擴展了React.ComponentClass | React.StatelessComponent >（component：T）=> T（+1 overload）「 –

您使用的是裝飾器嗎？ – Neo

終極版，反應，打字稿：連接返回查看類需要道具

回答

相關問題