Ответ заключается в том, что контекст this
всегда должен быть тем, в котором находится логика, поэтому, если логика, которая обрабатывает handleClick
, принадлежит классу Parent
, значит, контекст.
Кроме этого, в вашем коде есть некоторые проблемы.
1. Ваши классы компонентов должны расширяться React.Component
или React.PureComponent
, а не React
(возможно, это ошибка копирования-вставки, но если нетисправить это).
См .: https://reactjs.org/docs/components-and-props.html#function-and-class-components
2. Вам не нужно называть каждый отдельный реквизит, который должен проходить через все дочерние компоненты, вы можете использовать синтаксис распространения, если выкод с использованием ES6.
См .: https://reactjs.org/docs/jsx-in-depth.html#spread-attributes
class Child extends React.Component {
render() {
return (
// this is passing all props of Child to GrandChild
<GrandChild {...this.props} />
);
}
}
3.Для компонентов, которые не имеют состояния, используйте function
вместо class
, это более производительно, а такжекод меньше.
function Child(props) {
return (
<GrandChild {...props} />
);
}
Наконец ваш код может выглядеть так:
function Parent(props) {
function handleClick() {
console.log('clicked');
}
return <Child onClick={handleClick} />;
}
function Child(props) {
return <GrandChild {...props} />;
}
function GrandChild(props) {
return <div onClick={props.onClick} />;
}