Почему не работает вызов функции переданной через props?

12 июня 2021, 12:50

В родительском компоненте есть такая функция

this.mobileMenuOpen = () => {
    console.log('тут')
    this.setState({
        mobileMenuShow: !this.state.mobileMenuShow,
    })
    console.log(this.state.mobileMenuShow)
}

Также внутри родительского компонента есть вот такой дочерний:

<BackgroundWave 
    link={this.waveBackground} 
    link2={this.waveBackgroundWrapper}
    onMobileMenuOpen={this.mobileMenuOpen}
    mobileMenuOpen={this.state.mobileMenuShow}
/>

В дочерний компонент передается функция выше onMobileMenuOpen={this.mobileMenuOpen}

Далее эта функция вызывается в дочернем компоненте:

function BackgroundWave(props) {
    let classBackground, classArrow = '';
    if(props.mobileMenuOpen) {
        classBackground = 'background-wave background-wave--opened';
    } else {
        classBackground = 'background-wave';
    }


    return (
        <div className={classBackground} ref={props.link2}>
            <canvas ref={props.link} id='background-animation' className='background-wave__item'></canvas>
            <div className='background-wave__opener-wrap' onClick={props.onMobileMenuOpen}>
                <svg className='background-wave__opener'>
                    <use xlinkHref='img/icons/sprite.svg#mobile-opener' />
                </svg>
            </div>
        </div>
    );
  }

Но вызов не срабатывает, я не могу понять почему, пробовал вызывать различными способами.

onClick={props.onMobileMenuOpen()}
onClick={() => {props.onMobileMenuOpen}}

Но это не помогло

Answer 1

тут по коду есть несколько замечаний так как onMobileMenuOpen - это функция, то

onClick={props.onMobileMenuOpen()}
onClick={() => {props.onMobileMenuOpen}}

не будет работать так как. в первом случае она отрабатывает на момент рендера а не клика, должно быть: onClick={props.onMobileMenuOpen}; во втором случае при клике у нас вообще ничего не просиходит. должно быть: onClick={() => {props.onMobileMenuOpen()}}

this.mobileMenuOpen = () => {
    console.log('тут')
    this.setState({
        mobileMenuShow: !this.state.mobileMenuShow,
    })
    console.log(this.state.mobileMenuShow)
}

может не работать так как методы класса определяются без this ->

class Example extends Component{
mobileMenuOpen = () => {}
  render(){}
}

вообще вид пропсы лучше выносить через деструкторы:

function BackgroundWave({link,mobileMenuOpen,link2,onMobileMenuOpen}) {
    let classBackground, classArrow = '';
    if( mobileMenuOpen) {
        classBackground = 'background-wave background-wave--opened';
    } else {
        classBackground = 'background-wave';
    }
    return (
        <div className={classBackground} ref={link2}>
            <canvas ref={link} id='background-animation' className='background-wave__item' />
            <div className='background-wave__opener-wrap' onClick={onMobileMenuOpen}>
                <svg className='background-wave__opener'>
                    <use xlinkHref='img/icons/sprite.svg#mobile-opener' />
                </svg>
            </div>
        </div>
    );
  }

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как из отформатированной даты, вернуть её обратно к moment

Есть дата: moment()format('L') , как вернуть её обратно к moment? Если есть другие варианты, чтобы прибавить дни, они тоже подойдут, но пожалуйста, без парсинга...

102

javascript