使用打字稿实例化 React 组件时无法设置属性

Question

我有一个组件（TourSpecPropertiesSection），它可以访问商店中的对象。我希望它获取该对象的属性并将每个属性映射到另一个组件（TourSpecProperty），该组件现在将显示名称和值。我已经创建了这两个组件，但是当我尝试在 TourSpecPropertiesSection 中实例化 TourSpecProperty 时，即使我在接口中定义了 TourSpecProperty 的属性，我也无法设置它们。它给了我错误

"Property 'name' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<IOwnProps, never>,ComponentState, ...'"

我在错误消息中声明的接口IOwnProps，所以它似乎知道它。

库版本是

"react": "16.4.0",
"redux": "3.7.2",
"typescript": "2.8.3",

我的课是

TourSpecPropertiesSection

import TourSpec from '../../../models/TourSpec/TourSpec'
import * as React from 'react';
import IRootState from 'redux/rootState';
import { connect } from 'react-redux';
import TourSpecProperty from '../TourSpecProperty'


interface IStateProps {
    SelectedTourSpec: TourSpec | null
}

const getKeys = (tourSpec:TourSpec | null) => {
    if(tourSpec === null){
        return [];
    }
    let keys: string[] = [];
    for(let property in tourSpec){
        keys.push(property);
    }
    return keys;
}
const TourSpecPropertiesSection: React.SFC<IStateProps> = (props) => {    
const keys: string[] = getKeys(props.SelectedTourSpec);
return (
    <div className="tour-spec-section">
                        {/* error shows up here when trying to set name */}
    <TourSpecProperty Name={}/>
            <h3>TourSpec Properties</h3>
                                                                            {/* same error appears here */}
            {keys.map((property: string, index: number) => <TourSpecProperty Name={}/>)}
    </div>
    );
}


const mapStateToProps = (state:IRootState):IStateProps => {
    return {
        SelectedTourSpec: state.TourSpec.SelectedTourSpec
    }
}

export default connect<IStateProps, {}, {}, IRootState>(mapStateToProps)(TourSpecPropertiesSection);

和

TourSpecProperty

import IRootState from "../../../redux/rootState";
import { connect } from "react-redux";
import * as React from "react";

interface IOwnProps {
    Name: string,
    Value: any
}


const TourSpecProperty: React.SFC<IOwnProps> = (props) => {
    return (
        <div>
            <div>
                Name:{props.Name}
            </div>
            <div>
                Value:{props.Value}
            </div>
        </div>
    )
}

const mapStateToProps= (state:IRootState):IOwnProps => {
    return {} as IOwnProps;
}

export default connect<IOwnProps, {}, {}, IRootState>(mapStateToProps)(TourSpecProperty);

即使我已将 TourSpecProperty 连接到商店，它目前也没有状态，但一旦我在 TourSpecPropertiesSection 中实例化它，它将访问和更新我商店中的属性。

我怀疑我在某处使用了错误的类型，并且接口信息没有正确传递给 React 类，但是当我查看时我无法确定会发生这种情况或在线/stackoverflow 找到类似的问题。

我是否使用了不正确的类型，如果是，我应该使用哪些类型？如果没有，我做错了什么？

Answer 1

在TourSpecPropertySection 中，您使用<TourSpecProperty name={} /> 和name 作为道具键，而在TourSpecProperty 中，您将Name 定义为道具键。

name != Name

这两个需要以区分大小写的方式进行匹配。要么更新你的 props 以小写字母开头，要么更新你对 TourSpecProperty 的使用以指定 props 的首字母大写。