0
これ以降のパターンでは、初心者はJavascriptServicesのTypescriptをReact/Reduxなどで使用しているサイトです。Typescript react redux - 接続エラー
マインはReact Reduxプロジェクトです。
私は状態変数のカップルを使用していた
「NavMenu.tsx」と呼ばれるJavascriptServicesから定型の提供から大きく変更されていないメニューを表示するメニューTSXファイルを持っているが&「ユーザ名」を「IsAuthorised」 。これらは還元状態であり、私はそれらを設定しないで使用したいです。
特に、接続ステートメントの下部に次のエラーが表示されます。特にNavMenuは赤色で強調表示され、修正方法はわかりませんこのエラー？
[TS] 'typeof演算NavMenu' はタイプのパラメータに割り当て可能でないタイプの 引数のコンポーネント& LoginState> '。 'type of NavMenu'タイプは 'StatelessComponent & LoginState>'タイプに割り当てられません。 'type of NavMenu'は、シグネチャに一致しません。 '（小道具：DispatchProp & LoginState & {子：ReactNode;}、コンテキスト?:任意）：ReactElement'。ここで
NavMenuクラスのコードです - エラーは非常に最後の行にある：
import * as React from "react";
import { NavLink, Link } from "react-router-dom";
import {
Navbar,
Nav,
NavItem,
NavDropdown,
MenuItem,
Glyphicon
} from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import { connect } from "react-redux";
import { ApplicationState } from "../store";
import * as LoginState from "../store/Login";
// At runtime, Redux will merge together...
type NavMenuProps = LoginState.LoginState;
export class NavMenu extends React.Component<NavMenuProps, {}> {
public render() {
return (
<div className="main-nav">
<div className="navbar navbar-inverse">
<div className="navbar-header">
<button
type="button"
className="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse"
>
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar" />
<span className="icon-bar" />
<span className="icon-bar" />
</button>
<Link className="navbar-brand" to={"/"}>
JobsLedger_API
</Link>
</div>
<div className="clearfix" />
<div className="navbar-collapse collapse">
<ul className="nav navbar-nav">
<li>
<NavLink exact to={"/"} activeClassName="active">
<span className="glyphicon glyphicon-home" /> Home
</NavLink>
</li>
<li>
<NavLink to={"/counter"} activeClassName="active">
<span className="glyphicon glyphicon-education" /> Counter
</NavLink>
</li>
<li>
<NavLink to={"/fetchdata"} activeClassName="active">
<span className="glyphicon glyphicon-th-list" /> Fetch data
</NavLink>
</li>
</ul>
</div>
</div>
</div>
);
}
}
export default connect(
(state: ApplicationState) => state.login // Selects which state properties are merged into the component's props
)(NavMenu) as typeof NavMenu;
EDIT
は私が第一のコメントを注意して誰かがする必要がありますそれを拡大する。
私がJavascriptServicesの例で従っていたファイルは以下のとおりです。私はそれがここでは...という例でmapStateToPropsの言及はありませんでした。..
を自分の接続構文に従っている：
import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as WeatherForecastsState from '../store/WeatherForecasts';
// At runtime, Redux will merge together...
type WeatherForecastProps =
WeatherForecastsState.WeatherForecastsState // ... state we've requested from the Redux store
& typeof WeatherForecastsState.actionCreators // ... plus action creators we've requested
& RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters
class FetchData extends React.Component<WeatherForecastProps, {}> {
componentWillMount() {
// This method runs when the component is first added to the page
let startDateIndex = parseInt(this.props.match.params.startDateIndex) || 0;
this.props.requestWeatherForecasts(startDateIndex);
}
componentWillReceiveProps(nextProps: WeatherForecastProps) {
// This method runs when incoming props (e.g., route params) change
let startDateIndex = parseInt(nextProps.match.params.startDateIndex) || 0;
this.props.requestWeatherForecasts(startDateIndex);
}
public render() {
return <div>
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server and working with URL parameters.</p>
{ this.renderForecastsTable() }
{ this.renderPagination() }
</div>;
}
private renderForecastsTable() {
return <table className='table'>
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
{this.props.forecasts.map(forecast =>
<tr key={ forecast.dateFormatted }>
<td>{ forecast.dateFormatted }</td>
<td>{ forecast.temperatureC }</td>
<td>{ forecast.temperatureF }</td>
<td>{ forecast.summary }</td>
</tr>
)}
</tbody>
</table>;
}
private renderPagination() {
let prevStartDateIndex = (this.props.startDateIndex || 0) - 5;
let nextStartDateIndex = (this.props.startDateIndex || 0) + 5;
return <p className='clearfix text-center'>
<Link className='btn btn-default pull-left' to={ `/fetchdata/${ prevStartDateIndex }` }>Previous</Link>
<Link className='btn btn-default pull-right' to={ `/fetchdata/${ nextStartDateIndex }` }>Next</Link>
{ this.props.isLoading ? <span>Loading...</span> : [] }
</p>;
}
}
export default connect(
(state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
WeatherForecastsState.actionCreators // Selects which action creators are merged into the component's props
)(FetchData) as typeof FetchData;
あなたの 'mapStateToProps'関数はオブジェクトを返さなければなりません、' {...} ' – Dummy