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定义为道具键。< / p>

name != Name

这两个需要以区分大小写的方式匹配。将您的道具更新为小写字母或更新TourSpecProperty的使用情况，以指定带大写首字母的道具。

使用typescript实例化React组件时无法设置属性

1 个答案: