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

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

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

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

Q&A

解決済

1回答

238閲覧

react-motionのデモdemo4-photo-galleryの関数コンポーネントへのリファクタリングがどうしてもできない。

hood

総合スコア351

React.js

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

0グッド

0クリップ

投稿2019/07/12 05:04

編集2019/07/12 05:07

###react-motionのデモdemo4-photo-galleryの関数コンポーネントへのリファクタリングがどうしてもできない。
タイトル通りです。
私は以下のデモを関数コンポーネントで使うためリファクタリングしているのですが、どうしてもできません。
画像が表示されないのです。
デモのコード

https://github.com/chenglou/react-motion/blob/master/demos/demo4-photo-gallery/Demo.jsx

上のデモをリファクタリングしたコードが以下のものです。
どこが間違っているのかわからないので、情けないのですが全てのコードをのせます。

react

1import React, {useState} from 'react'; 2import {Motion, spring} from 'react-motion'; 3import '../css/Demo4.css'; 4 5 6const springSettings = {stiffness: 170, damping: 26}; 7const NEXT = 'show-next'; 8 9export default function Demo() { 10 const [photos] = useState([[500, 350], [800, 600], [800, 400], [700, 500], [200, 650], [600, 600]]); 11 const [currPhoto, setCurrPhoto] = useState(0); 12 13 const handleChange = (e) => { 14 setCurrPhoto(e.target.value); 15 }; 16 17 const clickHandler = (btn) => { 18 let photoIndex = btn === NEXT ? currPhoto + 1 : currPhoto - 1; 19 20 photoIndex = photoIndex >= 0 ? photoIndex : photos.length - 1; 21 photoIndex = photoIndex >= photos.length ? 0 : photoIndex; 22 23 setCurrPhoto(photoIndex); 24 }; 25 26 //現在の画像の幅と高さ。 27 const [currWidth, currHeight] = photos[currPhoto]; 28 //現在の画像の高さと、全ての画像の高さの比をとる。その比で幅をかける。それを集積している。 29 const widths = photos.map(([origW, origH]) => (currHeight / origH) * origW); 30 //全ての画像のを足した幅を出し、-に集積する、 31 const leftStartCoords = widths.slice(0, currPhoto).reduce((sum, width) => sum - width, 0); 32 33 //全ての画像のmotionを設定する。 34 let configs = []; 35 photos.reduce((prevLeft, [origW, origH], i) => {//集積した-から始める。 36 configs.push({ 37 left: spring(prevLeft, springSettings), 38 height: spring(currHeight, springSettings), 39 width: spring(widths[i], springSettings), 40 }); 41 return prevLeft + widths[i];//左端と左のやつを足したものを返す。それをprevに 42 }, leftStartCoords);//src初期値 43 44 return ( 45 <div> 46 <div>Scroll Me</div> 47 <button onClick={() => { 48 clickHandler("") 49 }}>Previous 50 </button> 51 <input 52 type="range" 53 min={0} 54 max={photos.length - 1} 55 value={currPhoto} 56 onChange={handleChange}/> 57 <button onClick={() => { 58 clickHandler(NEXT) 59 }}>Next 60 </button> 61 <div className="demo4"> 62 <Motion style={{height: spring(currHeight), widths: spring(currWidth)}}> 63 {container => 64 <div className="demo4-inner" style={container}> 65 {configs.map((style, i) => 66 <Motion key={i} style={style}> 67 {style => 68 <div> 69 <img className="demo4-photo" src={`../images/${i}.jpg`} alt="none" 70 style={style}/> 71 <p>{style.toString()}</p> 72 <p>{i}</p> 73 </div> 74 } 75 </Motion> 76 )} 77 </div> 78 } 79 </Motion> 80 </div> 81 </div> 82 ); 83}

このなかで注記すべきコードとして以下のコードがあります。

react

1<p>{style.toString()}</p> 2<p>{i}</p>

これはなぜ画像が表示されないかの、問題を特定するために書いたものです。

実行結果は以下の画像に示します。
なぜか初回は<p>{i}</p>も表示されません。
初回render
イメージ説明
nextボタンを押したらときのrender
イメージ説明

丸投げっぽい質問のしかたになって申し訳ないのですが、どうすればいいのかわかりません。
アドバイスをいただけたらと思います。

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

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

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

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

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

guest

回答1

0

自己解決

いろいろとコードに問題が見つかったので、いったん質問を締め切らせていただきます。荒らしてすいませんでした。また質問するかもしれませんが、そのさいはよろしくお願いします。

投稿2019/07/12 11:35

hood

総合スコア351

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問