1

Тема: React: задавати значення для props програмно

Доброго дня! Як на React задавати значення для props в залежності від якоїсь умови?
Під час створення CalendarSheet, в залежності від отриманого значення this.props.sheet, хочу коригувати наявну CSS-розмітку через style=...

class CalendarSheet extends React.Component {
  render() {
    if (!this.props.sheet) {
      let styleH3={fontWeight:'normal', color:'white'};
      let styleArticle={backgroundColor: '#30e9ca'};
    } else {
      let styleH3={color:'lightseagreen'};
    }
    return (
      <article className={styles.calendarSheet} style={styleArticle}>
        <h3 style={styleH3}>{this.props.text}</h3>
        <CalendarSheetElement sheet={this.props.sheet}/>
      </article>
    )
  }
}

Але отримую помилку:

  Line 110:56:  'styleArticle' is not defined  no-undef
  Line 111:20:  'styleH3' is not defined       no-undef
Search for the keywords to learn more about each error.

2

Re: React: задавати значення для props програмно

якшо if не виконується, то змінна не створюється
винесіть декларацію змінних за if, а ініціалізуйте вже в ifі

Подякували: Мишко1

3

Re: React: задавати значення для props програмно

Дякую! І справді, забув про область видимості змінних: оскільки змінні styleH3 й styleArticle оголошені у середині фігурних дужок блоку if, то вони існують лише у середині цього блоку, а ззовні - їх не існує.