Проблемы с синтаксисом стрелки и связывание в действии для элемента внука

Question

Я пытаюсь создать тестовую страницу, и у меня возникают проблемы с работой некоторых кнопок.

import React from 'react'
import { Dropdown, Icon, Menu, Segment } from 'semantic-ui-react'

export class Page extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
        this.state = {
            sidebarVisible: false
        }
    }

    render() {
        return (
            <Header name='test' onCLick={this.handleIconClick}/>
        )
    }

    handleIconClick = () => {

        console.log('CLICKED');
        let visible = !this.state.sidebarVisible;
        this.setState({sidebarVisible: visible});

    }

}

export class Header extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
        this.state = {
            iconName: this.props.visible ? 'angle double left' : 'angle double right'
        };
        console.log(this.props)
    }

    render() {
        return (
            <div>
                <Menu>
                    <Menu.Item onClick={this.props.onClick}>
                        <Icon name={this.state.iconName}/>
                    </Menu.Item>
                </Menu>
            </div>
        )
    }
}

В приведенном выше примере, к которому я пришел из следующей документации, смотрю онлайн для решений, et c ... даже не позволяет мне нажимать кнопку («CLICKED» никогда не регистрируется).

Когда я изменяю

<Menu.Item onClick={this.props.onClick}>

на

<Menu.Item onClick={() => this.props.onClick()}>

, я получаю сообщение об ошибке:

this.props.onClick is не функция

Я потратил довольно много времени на это, поэтому ваша помощь будет принята с благодарностью.

Спасибо.

Answer 1

Это не связано с синтаксисом стрелок. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * '' '' 1009 * * * '.

. * *

. *1005*.

. *