Newbie to React.jsは適切なTypescriptインターフェイスを特定できません

Question

私はVisual Studio Code IDEに入れたtrying this react exampleです。私はこのファイルをtable.tsxという名前にしました。 reactの例には、私が下に置いたインターフェース定義は含まれていません。

私はReact.Componentクラス宣言にジェネリック（インタフェースDEFS経由）を追加する必要がありました。 React.Componentはこれを必要とするようになりました。その部分はうまくいくようでした。今度は、以下に示すように残りのパラメータに問題があります。

文字列パラメータが好きではないので、赤い線はcolSpanの下にありますか？私は小道具のインターフェイスを正しく設定していないので、他の赤い線は問題の可能性が高いですか？

洞察が得意です。

Answer 1

ここにいくつかの問題があります。あなたが述べたように、それはこのように見える必要があるので、colSpanは、数ではなく文字列であることが予想されます。

<th colSpan={2}> 

あなたはとてもthis.props.categoryが本当になりません、配列するprops.productをも宣言しましたたくさんのセンス。あなたはおそらくしたいことはthis.props[0].categoryのようなものですが、より多くの可能性が高いあなたはProductCategoryRowコンポーネントにカテゴリ自体を渡したい：あなたは、一般的に、すべてのコンポーネントに同じ小道具の形状を渡したくない

class ProductCategoryRow extends React.Component<{category:string},any> 

。 ProductCategoryRowにはProductRowとは異なる小道具が必要です。