Reactを学習中です。ES6, JSX使ってます。
getImageUrl 辺りでエラーが出ます。
メソッドはアロー関数で定義できませんか?
また、エラーが発生した際にchrome上では何がどのように
誤っているのかエラーメッセージからは読み取れない?ので
効率的なデバッグ方法があれば教えてください
"react debug chrome"でググると、
React Developer Tools - Chrome Web Store
がヒットしますが、chromeプラグインはキーロガー等を含んでいる
怪しいプラグインがあったことを見たことがあるので、これの導入に
はあまり乗り気でないです。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <script src="http://unpkg.com/react@15/dist/react.min.js"></script> 6 <script src="http://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> 7 <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>--> 8 <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script> 9</head> 10<body> 11 <div id="root"></div> 12 <script type="text/babel"> 13 class PhotoText extends React.Component{ 14 const = getImageUrl = () => { 15 "img/" + this.props.image + ".jpeg" 16 } 17 render(){ 18 const label = this.props.label 19 //const url = getImageUrl 20 const url = "img/" + this.props.image + ".jpeg" 21 const boxStyle = { 22 border: "1px solid silver", 23 margin: "8px", 24 padding: "4px" 25 } 26 return <div style={boxStyle}> 27 <img src={url} width="128"/> 28 <span> {label} </span> 29 </div> 30 } 31 } 32 33 const dom = <div> 34 <PhotoText image="pic1" label="南国の浜辺でゆったり" /> 35 <PhotoText image="pic2" label="南国の海は開放的" /> 36 <PhotoText image="pic3" label="海、海、海、青い海" /> 37 </div> 38 ReactDOM.render(dom, document.getElementById('root')) 39 </script> 40</body> 41</html> 42 43
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/16 23:21
2018/09/17 00:05
2018/09/17 12:07