React : props の値によって適用するcssのプロパティを変更したい

Question

#状況
reactでwebアプリケーションを作成しています。
CSSの管理はahrpditeというCSSinJSを実現するパッケージを使ってます。

#やりたいこと
propsの値により、flexのwidthを変更したいのですが、
「runningTimeが定義されていない」とコンソールに怒られます。

// TvProgram.jsx

import React from 'react';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
  tvProgramWrap: {
    height: '60%',
    padding: '0 4px', 
    position: 'relative',
    zIndex: '3', 
  },

  tvProgram: {
    height: '100%',
    width: '100%',
    background: 'white',
    borderRadius: '100px',
    boxShadow: '1px 1px 4px rgba(0,0,0,.25)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
    fontWeight: 'bold',
    fontSize: '.8rem',
  },

  programTime: {
    fontSize: '.7rem', 
    fontWeight: 'normal',
    color: '#4b4b4b',
  },

  p1: {
    flex: '0 0 ' + programWidth ( pt ), 
  },
});

const pt = this.props.runningTime;

function programWidth (time) {
  const min = 11/60;
  const width =  time * min;
  return width.toString() + "rem"; 
}

class TvProgram extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={css(styles.tvProgramWrap, styles.p1)}>
        <div className={css(styles.tvProgram,)}>
          { this.props.name }<br />
          <span className={css(styles.programTime)}>{ this.props.time }</span>
        </div>
      </div>
    );
  }
}

export default TvProgram;

// TvPrograms.jsx

import React from 'react';
import { StyleSheet, css } from 'aphrodite';
import TvProgram from './TvProgram';

const styles = StyleSheet.create({
// 省略
});

const TvPrograms = () => (
  <div className={css(styles.tvPrograms)}>
    <TvProgram name="ニュース7" time="7:00 ~ 7:30" runningTime={30} />
    <TvProgram name="うたコン" time="7:30 ~ 8:45" runningTime={75} />
    <TvProgram name="ニュース7" time="8:45 ~ 9:00" runningTime={15} />
  </div>
);

export default TvPrograms;

エラー文は以下の通り

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の公式ドキュメントを読んだり、いろいろ調べてみても解決方法がよくわからなかったため、こちらで質問させていただきます。

よろしくお願いします。

Comments

[HayatoKamono]

というか、this.props.runningTimeが記述されている行ですが、this.props自体は存在してるのですか？そこで既にこけそうな。

[dwayne_johnson]

このcomponentを使いたいcomponentに、<TvProgram runningTime={30} />などのように存在しており、例えばこのrunningTimeをrender以下で文字列として表示させることは可能でした。( {this.props.runningTime} のように

[HayatoKamono]

エラー文をそのまま英語で追記頂けますか？

[HayatoKamono]

あれ、記載されてる行数が違う。。

[HayatoKamono]

TvProgram.jsx:37 Uncaught TypeError: エラー行37になってますが、掲載コードの問題の箇所と行数だいぶ違くありませんか？

[dwayne_johnson]

すみません、ごちゃついてるstylesの部分を省略していました。いろいろ情報不足で申し訳ありません

[dwayne_johnson]

JavaScriptのclass周りの理解（というかJavaScriptそのものの理解）が足りていないように思いますので、目下参考書を読んでいる途中ではあるのですが、、

[HayatoKamono]

問題の行の前でthisとthis.propsそれぞれをconsole.log()で中身確認したらどうなりますか？その辺を確認すると良いと思います。参照出来ない理由は回答の通りです。

Answer 1

例えばこのrunningTimeをrender以下で文字列として表示させることは可能でした。

それは、対象のコンポーネントの中で参照しているので、期待通りの動きです。constructorの中でも参照出来ると思います。(APIからの取得データをpropsから渡しているなどの場合は別の話として)

const pt = this.props.runningTime

逆にこの行は対象のコンポーネントの外に書かれているので、参照出来なくて当然かと思います。

「runningTimeが定義されていない」とコンソールに怒られます。

エラー文を読み違えていると思います。

cannot read property xxx of undefined はxxxが未定義というよりも、未定義であるもののxxxを読めないというエラーなので、今回の場合は未定義と怒られているのはpropsの方です。propsが未定義の為、必然的にrunningTimeは読めません。未定義と怒られてしまう理由は前述の通りです。

Answer 2

外で定義した関数にpropsを使うことは無理だとわかったので、classで定義した<div>タグに直接インラインでstyle定義することにしました。

import React from 'react';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
//省略
  
});

class TvProgram extends React.Component {
  constructor(props) {
    super(props);
    this.width = this.width.bind(this);
    this.flex = this.flex.bind(this);
  }
  
  width(time) {
  const min = 11/60;
  const width =  time * min;
  return width.toString() + "rem"; 
  }
  
  flex(time){
    return "0 0 " + this.width(time);
  }
  
  render() {
    return (
      <div style={{flex: this.flex(this.props.runningTime), height: '60%'}}>
        <div className={css(styles.tvProgramWrap,)}>
          <div className={css(styles.tvProgram,)}>
            { this.props.name }<br />
            <span className={css(styles.programTime)}>{ this.props.time }</span>
          </div>
        </div>
      </div>
    );
  }
}

export default TvProgram;