質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

11302閲覧

React+Typescript エラーが解決できない

cuku

総合スコア108

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/11/22 10:18

App.tsx

1import Title from './components/Title'; 2 3class App extends Component { 4 5 //Event handlerやstateを定義する場所 → OK 6 onClickHandler = () => { 7 let title = document.getElementById('versionCounter'); 8 let upgradeButton = document.getElementById('upgradeButton'); 9 upgradeButton.style.display = "none"; 10} 11 12//render()メソッド → OK 13render() { 14 15 //return → OK 16 return ( 17 <div className="App"> 18 <header className="App-header"> 19 <Title 20 title="Hello World 3.0" 21 titleStyle={{color: 'orange'}} 22 onClick={this.onClickHandler} 23 > 24 Hello World <span id="versionCounter" style={{borderBottom: '1px solid orange'}}>3.0</span> 25 </Title> 26 </header> 27 </div> 28 ); 29} 30} 31export default App;

Title.js

1import React from 'react'; 2 3type Props = { 4 title: string, 5 onClick: Function, 6 color: string 7} 8const Title : React.FC<Props> = (props) => { 9 return( 10 <div className = "titleSection"> 11 <h2 style={{props.titleStyle}} id= "versionStatement"> {props.children}</h2> 12 <p onClick = {props.onClick} id= "upgradeButton">Upgrade</p> 13 </div> 14 ); 15} 16 17export default Title;

下記の二つのエラーが解決できません
エラー内容
Type '{ children: (string | Element)[]; title: string; titleStyle: { color: string; }; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
Property 'titleStyle' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.

Type '{ children: (string | Element)[]; title: string; titleStyle: { color: string; }; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.
Property 'titleStyle' does not exist on type 'IntrinsicAttributes & Props & { children?: ReactNode; }'.ts(2322)

誰か教えてください

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは

AppからTitleを使うときに、TitleのPropsに定義されていない、titleStyletitleStyle={{color: 'orange'}} として渡しているのが原因と思われます。

解決策として、csstype を利用して、以下のように修正するといかがでしょうか?

修正前:

typescript

1type Props = { 2 title: string, 3 onClick: Function, 4 color: string 5}

tsx

1<h2 style={{props.titleStyle}} ・・・

修正後:

  • yarn add csstype しておいて、

typescript

1import * as CSS from 'csstype';

TitleのPropsから、colorを削除し、titleStyleを以下のように追加

typescript

1type Props = { 2 title: string; 3 onClick: Function; 4 titleStyle: CSS.Properties 5}

それと、 props.titleStyle を囲む {} は二重である必要はないので、

<h2 style={props.titleStyle} ・・・

とします。

以上、参考になれば幸いです。

追記

より簡単な修正としては、現状のProps

typescript

1type Props = { 2 title: string; 3 onClick: Function; 4 color: string 5}

のほうを生かしておいて、Appから使うほうで、titleStyleではなくcolorを渡すようにします。

tsx

1<Title 2 title="Hello World 3.0" 3 color="orange" 4 onClick={this.onClickHandler} 5>

Title側では、受け取った color を以下のように style に設定します。

tsx

1<h2 style={{color: props.color}}

投稿2019/11/23 03:11

編集2019/11/23 03:20
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問