#状況
reactでwebアプリケーションを作成しています。
CSSの管理はahrpditeというCSSinJSを実現するパッケージを使ってます。
#やりたいこと
propsの値により、flexのwidthを変更したいのですが、
「runningTimeが定義されていない」とコンソールに怒られます。
javascript
1// TvProgram.jsx 2 3import React from 'react'; 4import { StyleSheet, css } from 'aphrodite'; 5 6const styles = StyleSheet.create({ 7 tvProgramWrap: { 8 height: '60%', 9 padding: '0 4px', 10 position: 'relative', 11 zIndex: '3', 12 }, 13 14 tvProgram: { 15 height: '100%', 16 width: '100%', 17 background: 'white', 18 borderRadius: '100px', 19 boxShadow: '1px 1px 4px rgba(0,0,0,.25)', 20 display: 'flex', 21 alignItems: 'center', 22 justifyContent: 'center', 23 flexDirection: 'column', 24 fontWeight: 'bold', 25 fontSize: '.8rem', 26 }, 27 28 programTime: { 29 fontSize: '.7rem', 30 fontWeight: 'normal', 31 color: '#4b4b4b', 32 }, 33 34 p1: { 35 flex: '0 0 ' + programWidth ( pt ), 36 }, 37}); 38 39const pt = this.props.runningTime; 40 41function programWidth (time) { 42 const min = 11/60; 43 const width = time * min; 44 return width.toString() + "rem"; 45} 46 47class TvProgram extends React.Component { 48 constructor(props) { 49 super(props); 50 } 51 52 render() { 53 return ( 54 <div className={css(styles.tvProgramWrap, styles.p1)}> 55 <div className={css(styles.tvProgram,)}> 56 { this.props.name }<br /> 57 <span className={css(styles.programTime)}>{ this.props.time }</span> 58 </div> 59 </div> 60 ); 61 } 62} 63 64export default TvProgram;
javascript
1// TvPrograms.jsx 2 3import React from 'react'; 4import { StyleSheet, css } from 'aphrodite'; 5import TvProgram from './TvProgram'; 6 7const styles = StyleSheet.create({ 8// 省略 9}); 10 11const TvPrograms = () => ( 12 <div className={css(styles.tvPrograms)}> 13 <TvProgram name="ニュース7" time="7:00 ~ 7:30" runningTime={30} /> 14 <TvProgram name="うたコン" time="7:30 ~ 8:45" runningTime={75} /> 15 <TvProgram name="ニュース7" time="8:45 ~ 9:00" runningTime={15} /> 16 </div> 17); 18 19export default TvPrograms; 20
エラー文は以下の通り
TvProgram.jsx:37 Uncaught TypeError: Cannot read property 'runningTime' of undefined at Object.defineProperty.value (TvProgram.jsx:37) at __webpack_require__ (bootstrap fbd1499fd1e27da32198:19) at Object.<anonymous> (TvPrograms.jsx:1) at __webpack_require__ (bootstrap fbd1499fd1e27da32198:19) at Object.defineProperty.value (TvListings.jsx:1) at __webpack_require__ (bootstrap fbd1499fd1e27da32198:19) at Object.defineProperty.value (PageOfTvListings.jsx:1) at __webpack_require__ (bootstrap fbd1499fd1e27da32198:19) at Object.<anonymous> (getPrefixedValue.js:13) at __webpack_require__ (bootstrap fbd1499fd1e27da32198:19)
Tvprograms.jsxの中に<TvProgram name="ニュース7" time="7:00 ~ 7:30" runningTime={30} />
のようなコンポネントが複数入っている感じです。
恐らくReactにおけるpropsの参照の仕方を深く理解していないことが原因だと思うのですが、Reactの公式ドキュメントを読んだり、いろいろ調べてみても解決方法がよくわからなかったため、こちらで質問させていただきます。
よろしくお願いします。
というか、this.props.runningTimeが記述されている行ですが、this.props自体は存在してるのですか?そこで既にこけそうな。
このcomponentを使いたいcomponentに、<TvProgram runningTime={30} />などのように存在しており、例えばこのrunningTimeをrender以下で文字列として表示させることは可能でした。( {this.props.runningTime} のように
エラー文をそのまま英語で追記頂けますか?
あれ、記載されてる行数が違う。。
TvProgram.jsx:37 Uncaught TypeError: エラー行37になってますが、掲載コードの問題の箇所と行数だいぶ違くありませんか?
すみません、ごちゃついてるstylesの部分を省略していました。いろいろ情報不足で申し訳ありません
JavaScriptのclass周りの理解(というかJavaScriptそのものの理解)が足りていないように思いますので、目下参考書を読んでいる途中ではあるのですが、、
問題の行の前でthisとthis.propsそれぞれをconsole.log()で中身確認したらどうなりますか?その辺を確認すると良いと思います。参照出来ない理由は回答の通りです。
回答2件
あなたの回答
tips
プレビュー