Javascript 使用typescript将状态传递给react redux中的子组件

也许我疯了，但我正在努力学习，同时使用ReachJs、Redux和打字脚本。主要是因为VisualStudio模板项目使用了这三种方法，我也想学习这三种方法

我真的很难掌握如何将状态从父组件传递到子组件

在我的示例中，我有一个计数器组件，它只是想列出一些计数器组件。任何人都可以解释一下，或者我可以下载的任何示例项目中有没有任何例子，其中包含react-redux和typescript这三种功能——我正在努力找到很多这三种功能的例子

我可以单独渲染一个计数器组件，但只要我尝试使用父组件渲染多个计数器组件，就会出现错误

这是我的柜台

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState }  from '../store';
import * as CountersStore from '../store/Counters';
import { Counter } from './Counter';

type CountersProps =
    CountersStore.CountersState
    & typeof CountersStore.actionCreators
    & RouteComponentProps<{}>;

class Counters extends React.Component<CountersProps, {}> {
    public render() {
        return <div className="m-2">
            {this.props.counters.map(x => <Counter props="x"/>)}
        </div>;
    }
}

// Wire up the React component to the Redux store
export default connect(
    (state: ApplicationState) => state.counters, // Selects which state properties are merged into the component's props
    CountersStore.actionCreators                 // Selects which action creators are merged into the component's props
)(Counters) as typeof Counters;

import*as React from'React'；
从“react router dom”导入{Link，RouteComponentProps}；
从'react redux'导入{connect}；
从“../store”导入{ApplicationState}；
从“../store/Counters”导入*作为计数器存储；
从“./Counter”导入{Counter}；
型埋头钻=
counterstore.counterstate
&CountersStore.actionCreators的类型
&路由组件支柱；
类计数器扩展React.Component{
公共渲染（）{
返回
{this.props.counters.map（x=>）}
;
}
}
//将React组件连接到Redux存储
导出默认连接(
（state:ApplicationState）=>state.counters，//选择将哪些状态属性合并到组件的道具中
CountersStore.actionCreators//选择将哪些动作创建者合并到组件的道具中
)（计数器）作为计数器类型；

这是我的柜台

import { Action, Reducer } from 'redux';
import * as Counter from './Counter';

export interface CountersState {
    counters: Counter.CounterState[]
}

interface DeleteCounterAction { type: 'DELETE_COUNTER', payload: number }
type KnownAction = DeleteCounterAction;

export const actionCreators = {
    increment: (valueCount: any) => <DeleteCounterAction>{ type: 'DELETE_COUNTER', payload: valueCount },
};

export const reducer: Reducer<CountersState> = (state: CountersState, incomingAction: Action) => {
    const action = incomingAction as DeleteCounterAction;
    switch (action.type) {
        case 'DELETE_COUNTER':
            return { counters: [] };
    }
    return state || { counters: [] };
};

从'redux'导入{Action，Reducer}；
从“./Counter”导入*作为计数器；
导出接口状态{
计数器：计数器。计数器状态[]
}
接口删除抵消{type:'DELETE_COUNTER'，有效负载：number}
类型KnownAction=删除抵消；
导出常量actionCreators={
增量：（valueCount:any）=>{type:'DELETE_COUNTER'，负载：valueCount}，
};
导出const reducer:reducer=（状态：counterstate，incomingAction:Action）=>{
const action=incomingAction作为删除抵消；
开关（动作类型）{
案例“删除计数器”：
返回{计数器：[]}；
}
返回状态| |{计数器：[]}；
};

这是我的柜台

import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState }  from '../store';
import * as CounterStore from '../store/Counter';

type CounterProps =
    CounterStore.CounterState
    & typeof CounterStore.actionCreators
    & RouteComponentProps<{}>;

export class Counter extends React.Component<CounterProps, {}> {
    public render() {
        return <div className="m-2">
            <span>{this.props.Text}</span>
            <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
            <button className="btn btn btn-primary btn-sm m-2" onClick={() => { this.props.increment(2) }}>Increment</button>
            <button className="btn btn-danger btn-sm m-2" onClick={() => { this.props.increment(3) }}>Delete</button>
        </div>;
    }

    formatCount() {
        const currentCount = this.props.count;
        return currentCount === 0 ? "Zero" : currentCount;
    }

    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += this.props.count === 0 ? "warning" : "primary";
        return classes;
    }
}

// Wire up the React component to the Redux store
export default connect(
    (state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
    CounterStore.actionCreators                 // Selects which action creators are merged into the component's props
)(Counter) as typeof Counter;

import*as React from'React'；
从“react router dom”导入{Link，RouteComponentProps}；
从'react redux'导入{connect}；
从“../store”导入{ApplicationState}；
从“../store/Counter”导入*作为计数器存储；
类型对销=
反态
&CounterStore.actionCreators的类型
&路由组件支柱；
导出类计数器扩展了React.Component{
公共渲染（）{
返回
{this.props.Text}
{this.formatCount（）}
{this.props.increment（2）}>increment
{this.props.increment（3）}>删除
;
}
formatCount（）{
const currentCount=this.props.count；
返回currentCount==0？“零”：currentCount；
}
getBadgeClasses（）{
let classes=“badge m-2 badge-”；
classes+=this.props.count==0？“警告”：“主要”；
返回类；
}
}
//将React组件连接到Redux存储
导出默认连接(
（state:ApplicationState）=>state.counter，//选择将哪些状态属性合并到组件的道具中
CounterStore.actionCreators//选择哪些动作创建者合并到组件的道具中
)（计数器）作为计数器的类型；

这是我的柜台

import { Action, Reducer } from 'redux';

export interface CounterState {
    count: number;
    Text: string;
}

interface IncrementCountAction { type: 'INCREMENT_COUNT', payload: number }
interface DecrementCountAction { type: 'DECREMENT_COUNT', payload: number }

type KnownAction = IncrementCountAction | DecrementCountAction;

export const actionCreators = {
    increment: (valueCount: any) => <IncrementCountAction>{ type: 'INCREMENT_COUNT', payload: valueCount },
    decrement: (valueCount: any) => <DecrementCountAction>{ type: 'DECREMENT_COUNT', payload: valueCount },
};

export const reducer: Reducer<CounterState> = (state: CounterState, incomingAction: Action) => {
    const action = incomingAction as KnownAction;
    switch (action.type) {
        case 'INCREMENT_COUNT':
            return { count: state.count + action.payload, Text: state.Text + action.payload.toString() };
        case 'DECREMENT_COUNT':
            return { count: state.count - action.payload, Text: state.Text  };
        default:
            const exhaustiveCheck: never = action;
    }

    return state || { count: 0, Text: "Hello" };
};

从'redux'导入{Action，Reducer}；
导出接口反状态{
计数：数字；
文本：字符串；
}
接口IncrementCountAction{type:'INCREMENT_COUNT'，有效负载：number}
接口递减计数器{type:'decredition_COUNT'，有效负载：number}
类型KnownAction=递增计数动作|递减计数动作；
导出常量actionCreators={
增量：（valueCount:any）=>{type:'increment_COUNT'，有效负载：valueCount}，
递减：（valueCount:any）=>{type:'decrement\u COUNT'，有效负载：valueCount}，
};
导出常量减速机：减速机=（状态：反状态，输入操作：操作）=>{
常量动作=作为已知动作输入动作；
开关（动作类型）{
案例“增量计数”：
返回{count:state.count+action.payload，Text:state.Text+action.payload.toString（）}；
案例“递减计数”：
返回{count:state.count-action.payload，Text:state.Text}；
违约：
const defactvecheck：从不=操作；
}
返回状态| |{count:0，文本：“Hello”}；
};

您是否签出了React上下文？听起来这可能是您感兴趣的事情：这与Redux打算做的事情不一样吗，关于状态并传输到需要它的不同组件？上下文与Redux Pros-更容易实现-权重和性能-更干净的操作返回状态块（如setState）Cons它只适用于React^16.3--摘自Ok cheers-将查看它，谢谢