ReactJS Использование дочерних реквизитов в родительском классе

Question

У меня есть родительский класс, который использует своего потомка для рендеринга некоторых кнопок из массива days. Пока все работает нормально. Я использую обработчик, чтобы передать handleClick () ребенку. Это также сработало, без оператора if я получаю возврат в консоли. Что не так с моим кодом или мышлением для оператора if. Он должен ответить «Привет 1», если я нажму на кнопку со значением дней [0] = 1.

Родитель:

export default class Parent extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      days: [1,2,3]
    }

  }

  handleClick() {
      if(this.props.value === 1) {
      return console.log('Hi 1')
    }
  }

  render() {
    return (
      <div>
          <div>
            {this.state.days.map(item => <ButtonDays handler={ () => this.handleClick()} key={item} value={item} />)}
          </div>
      </div>
    );
  }
}

Ребенок:

export default class ButtonDays extends React.Component { 
  render() {
    return (
      <Button onClick={this.props.handler}>{this.props.value}</Button>
    );
  }
}

Answer 1

В следующей части вашего родительского компонента

handleClick() {
  if(this.props.value === 1) {
    return console.log('Hi 1')
  }
}

Вы проверяете реквизит с именем value, но этот реквизит определен только в вашем дочернем компоненте.

Вместо этого вы должны передать кликнутое значение как параметр функции handler.

<Button onClick={() => this.props.handler(this.props.value)}>{this.props.value}</Button>

А потом в родительском компоненте:

handleClick(value) {
  if(value === 1) {
    return console.log('Hi 1')
  }
}