Невозможно установить свойства при создании экземпляра компонента React с помощью машинописи - PullRequest
0 голосов
/ 25 мая 2018

У меня есть компонент (TourSpecPropertiesSection), который будет иметь доступ к объекту из магазина.Я хочу, чтобы он взял свойства этого объекта и сопоставил каждый из них с другим компонентом (TourSpecProperty), который покажет имя и значение на данный момент.Я создал оба компонента, но когда я пытаюсь создать экземпляр TourSpecProperty внутри TourSpecPropertiesSection, я не могу установить свойства 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, когда я посмотрел.

Использовали ли я неправильные типы, и если да, то какие из них следует использовать?Если нет, то что я сделал неправильно?

1 Ответ

0 голосов
/ 25 мая 2018

В TourSpecPropertySection вы используете <TourSpecProperty name={} /> с name в качестве ключа реквизита, в то время как в TourSpecProperty вы определяете Name в качестве ключа реквизита.

name != Name

Эти два должны совпадать с учетом регистра.Либо обновите реквизиты, чтобы они начинались с строчных букв, либо измените использование TourSpecProperty, чтобы указать реквизиты с заглавными буквами.

...