質問編集履歴
4
タイトルの変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Reactでiframeを使いたい
|
|
1
|
+
Reactでiframeを使いたい（解決済み 成功コード追記）
|
body
CHANGED
|
File without changes
|
3
成功したので、成功したコードを追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
Reactの学習をしており、コンポネントを作成したのですが想定どおりの動きをさせるために何をすれば良いのかアドバイスいただければと存じます。
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
#### 想定している動き
|
|
4
4
|
下記のようなページで、左側の「rakuten」や「amazon」の文字列をhoverしたときに、
|
|
5
5
|
右側のiframe内にそれぞれのwebサイトが表示されるようにしたいです。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
+
|
|
9
|
-
下記のようにコードを書いてみましたが、
|
|
10
|
+
#### 下記のようにコードを書いてみましたが、、
|
|
10
11
|
`Expected an assignment or function call and instead saw an expression no-unused-expressions`
|
|
11
12
|
というエラーになってしまいます。
|
|
12
|
-
|
|
13
|
-
コード↓
|
|
14
13
|
```React
|
|
15
14
|
import React from 'react';
|
|
16
15
|
import './menu.scss'
|
|
@@ -74,4 +73,72 @@
|
|
|
74
73
|
export default MenuNew;
|
|
75
74
|
```
|
|
76
75
|
想定している動きを実現させるためにはどのような方法がありますでしょうか？
|
|
77
|
-
アドバイスいただけますと嬉しいです。
|
|
76
|
+
アドバイスいただけますと嬉しいです。
|
|
77
|
+
|
|
78
|
+
#### → 想定した動きを実現できました
|
|
79
|
+
新しいコンポネントを作り直してしまったので、上記のコードと大分変わってしまいましたが、
|
|
80
|
+
「文字列をhoverしたときに、iframe内にそれぞれのwebサイトが表示されるように」できました。
|
|
81
|
+
また、jsonファイルはsrc配下に別ファイルとして持たせています。
|
|
82
|
+
```React
|
|
83
|
+
import React from 'react';
|
|
84
|
+
import data from './sample.json';
|
|
85
|
+
|
|
86
|
+
const Show = ({ title, url, isOpen, onMouseOver }) => (
|
|
87
|
+
<div>
|
|
88
|
+
<p onMouseOver={onMouseOver}>{title}</p>
|
|
89
|
+
{isOpen && <iframe src={url}/>}
|
|
90
|
+
</div>
|
|
91
|
+
);
|
|
92
|
+
|
|
93
|
+
class App extends React.Component {
|
|
94
|
+
constructor(props){
|
|
95
|
+
super(props);
|
|
96
|
+
this.json = data;
|
|
97
|
+
this.state={
|
|
98
|
+
openIds: []
|
|
99
|
+
}
|
|
100
|
+
this.handleChange = this.handleChange.bind(this);
|
|
101
|
+
}
|
|
102
|
+
handleChange(id){
|
|
103
|
+
let { openIds } = this.state;
|
|
104
|
+
openIds = openIds.includes(id) ? openIds.filter(e => e !== id) : [...openIds, id];
|
|
105
|
+
this.setState({ openIds });
|
|
106
|
+
}
|
|
107
|
+
render(){
|
|
108
|
+
return(
|
|
109
|
+
<div>
|
|
110
|
+
{this.json.map(q => (
|
|
111
|
+
<Show
|
|
112
|
+
key={q.id}
|
|
113
|
+
title={q.title}
|
|
114
|
+
url={q.url}
|
|
115
|
+
isOpen={this.state.openIds.includes(q.id)}
|
|
116
|
+
onMouseOver={() => { this.handleChange(q.id); }}
|
|
117
|
+
/>
|
|
118
|
+
))}
|
|
119
|
+
</div>
|
|
120
|
+
)
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
export default App;
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
```json
|
|
127
|
+
[
|
|
128
|
+
{
|
|
129
|
+
"id": "1",
|
|
130
|
+
"title": "Green RGBA model",
|
|
131
|
+
"url": "http://www.flatuicolorpicker.com/green-rgba-color-model"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"id": "2",
|
|
135
|
+
"title": "HTML color code",
|
|
136
|
+
"url": "https://html-color-codes.info/japanese/"
|
|
137
|
+
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
]
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
出力はこんな感じです。
|
|
144
|
+
|
2
ShowCase内に`title={title}`を追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
const ShowCase = ({title, content, isOpen, onMouseOver}) => (
|
|
32
32
|
<div onMouseOver={onMouseOver}>
|
|
33
33
|
<p>{title}</p>
|
|
34
|
-
{isOpen && <iframe class='showcase' src={content}></iframe>}
|
|
34
|
+
{isOpen && <iframe class='showcase' title={title} src={content}></iframe>}
|
|
35
35
|
</div>
|
|
36
36
|
)
|
|
37
37
|
|
1
コメントの編集
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
constructor(props){
|
|
41
41
|
super(props);
|
|
42
42
|
this.contents = JSON.parse(CONTENTS_JSON);
|
|
43
|
-
//
|
|
43
|
+
// idを配列で持てるようにする
|
|
44
44
|
this.state = {
|
|
45
45
|
openIds: []
|
|
46
46
|
}
|