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

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

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

RealmとはSQLiteやCore Dataに代わるモバイルデータベースです。iOSとAndroidの両方でサポートされています。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

Q&A

解決済

1回答

12372閲覧

Reactでiframeを使いたい(解決済み 成功コード追記)

lisateratail

総合スコア7

Realm

RealmとはSQLiteやCore Dataに代わるモバイルデータベースです。iOSとAndroidの両方でサポートされています。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

0グッド

0クリップ

投稿2020/02/16 07:05

編集2020/02/21 02:53

Reactの学習をしており、コンポネントを作成したのですが想定どおりの動きをさせるために何をすれば良いのかアドバイスいただければと存じます。

想定している動き

下記のようなページで、左側の「rakuten」や「amazon」の文字列をhoverしたときに、
右側のiframe内にそれぞれのwebサイトが表示されるようにしたいです。

画面イメージ

下記のようにコードを書いてみましたが、、

Expected an assignment or function call and instead saw an expression no-unused-expressions
というエラーになってしまいます。

React

1import React from 'react'; 2import './menu.scss' 3 4const CONTENTS_JSON = `[ 5 { 6 "id": 1, 7 "title": "amazon", 8 "content":"https://www.amazon.co.jp/" 9 }, 10 { 11 "id": 2, 12 "title": "rakuten", 13 "content": "https://www.rakuten.co.jp/" 14 }, 15]`; 16 17const ShowCase = ({title, content, isOpen, onMouseOver}) => ( 18 <div onMouseOver={onMouseOver}> 19 <p>{title}</p> 20 {isOpen && <iframe class='showcase' title={title} src={content}></iframe>} 21 </div> 22) 23 24 25class MenuNew extends React.Component { 26 constructor(props){ 27 super(props); 28 this.contents = JSON.parse(CONTENTS_JSON); 29 // idを配列で持てるようにする 30 this.state = { 31 openIds: [] 32 } 33 this.mouseOver = this.mouseOver.bind(this); 34 } 35 mouseOver(id){ 36 // 分割代入 37 let {openIds} = this.state; 38 openIds = openIds.includes(id) ? openIds.filter(e => e !== id) : [...openIds, id]; 39 this.setState({ openIds }); 40 } 41 render(){ 42 return( 43 <div className='main'> 44 <div> 45 {this.contents.map(q => { 46 <ShowCase 47 key={q.id} 48 title={q.title} 49 content={q.content} 50 onMouseOver={() => {this.mouseOver(q.id)}} 51 isOpen={this.state.openIds.includes(q.id)} 52 /> 53 })} 54 </div> 55 </div> 56 ); 57 } 58} 59 60export default MenuNew;

想定している動きを実現させるためにはどのような方法がありますでしょうか?
アドバイスいただけますと嬉しいです。

→ 想定した動きを実現できました

新しいコンポネントを作り直してしまったので、上記のコードと大分変わってしまいましたが、
「文字列をhoverしたときに、iframe内にそれぞれのwebサイトが表示されるように」できました。
また、jsonファイルはsrc配下に別ファイルとして持たせています。

React

1import React from 'react'; 2import data from './sample.json'; 3 4const Show = ({ title, url, isOpen, onMouseOver }) => ( 5 <div> 6 <p onMouseOver={onMouseOver}>{title}</p> 7 {isOpen && <iframe src={url}/>} 8 </div> 9); 10 11class App extends React.Component { 12 constructor(props){ 13 super(props); 14 this.json = data; 15 this.state={ 16 openIds: [] 17 } 18 this.handleChange = this.handleChange.bind(this); 19 } 20 handleChange(id){ 21 let { openIds } = this.state; 22 openIds = openIds.includes(id) ? openIds.filter(e => e !== id) : [...openIds, id]; 23 this.setState({ openIds }); 24 } 25 render(){ 26 return( 27 <div> 28 {this.json.map(q => ( 29 <Show 30 key={q.id} 31 title={q.title} 32 url={q.url} 33 isOpen={this.state.openIds.includes(q.id)} 34 onMouseOver={() => { this.handleChange(q.id); }} 35 /> 36 ))} 37 </div> 38 ) 39 } 40} 41export default App;

json

1[ 2 { 3 "id": "1", 4 "title": "Green RGBA model", 5 "url": "http://www.flatuicolorpicker.com/green-rgba-color-model" 6 }, 7 { 8 "id": "2", 9 "title": "HTML color code", 10 "url": "https://html-color-codes.info/japanese/" 11 12 } 13 14]

出力はこんな感じです。
イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

jsx

1 {this.contents.map(q => { 2 <ShowCase 3 key={q.id} 4 title={q.title} 5 content={q.content} 6 onMouseOver={() => {this.mouseOver(q.id)}} 7 isOpen={this.state.openIds.includes(q.id)} 8 /> 9 })}

ここで、中括弧を使ってArrow Functionを書いているため、mapへ返す返り値がなくなっています。

returnを明記するか、q =>のあとのカッコを丸括弧にして式を返すArrow Functionにするかのどちらかです。

投稿2020/02/16 07:10

maisumakun

総合スコア144988

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

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

lisateratail

2020/02/16 07:57 編集

ありがとうございます!! Allow functionに直したところ、`Expected an assignment or function call and instead saw an expression no-unused-expressions`エラーは出なくなりました。 ターミナルに `<iframe> elements must have a unique title property jsx-a11y/iframe-has-title`というメッセージが出たので、ShowCase内に`title={title}`を追記しました。 ``` {isOpen && <iframe class='showcase' title={title} src={content}></iframe>} ``` 現在は`Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.`というエラーが出てしまっています。 `yarn create react-app`で作成したReactなのでwebpackは使ってなく、ヘルプページを見てみましたが自分ではわからなそうです。 もしエラー解消の方法を何かご存知でしたらアドバイスいただければと存じます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

Realm

RealmとはSQLiteやCore Dataに代わるモバイルデータベースです。iOSとAndroidの両方でサポートされています。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。