teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

テキスト修正

2019/11/23 03:20

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -26,8 +26,8 @@
26
26
  TitleのPropsから、colorを削除し、titleStyleを以下のように追加
27
27
  ```typescript
28
28
  type Props = {
29
- title: string,
29
+ title: string;
30
- onClick: Function,
30
+ onClick: Function;
31
31
  titleStyle: CSS.Properties
32
32
  }
33
33
  ```
@@ -40,4 +40,28 @@
40
40
  とします。
41
41
 
42
42
 
43
- 以上、参考になれば幸いです。
43
+ 以上、参考になれば幸いです。
44
+
45
+
46
+ ### 追記
47
+
48
+ より簡単な修正としては、現状のProps
49
+ ```typescript
50
+ type Props = {
51
+ title: string;
52
+ onClick: Function;
53
+ color: string
54
+ }
55
+ ```
56
+ のほうを生かしておいて、Appから使うほうで、titleStyleではなくcolorを渡すようにします。
57
+ ```tsx
58
+ <Title
59
+ title="Hello World 3.0"
60
+ color="orange"
61
+ onClick={this.onClickHandler}
62
+ >
63
+ ```
64
+ Title側では、受け取った color を以下のように style に設定します。
65
+ ```tsx
66
+ <h2 style={{color: props.color}}
67
+ ```