У меня есть компонент (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, когда я посмотрел.
Использовали ли я неправильные типы, и если да, то какие из них следует использовать?Если нет, то что я сделал неправильно?