Как передать функуцию, которая ожидает аргументы в другой компонент?

Question

[uzi_no_uzi]

Сделал простой пример, правильно ли я передаю функцию дочернему компоненту?

В моем реальном проекте это почему-то не работает, хотя я передаю по такой схеме: родительский компонент => дочерний => еще один дочерний

import React from 'react';

class Component1 extends React.Component {
  constructor() {
    this.func = (category) => {
      //do something
    }
  }
  
  render() {
    <Component2 onOpen={this.func} />
  }
}


class Component2 extends React.Component {
  constructor() {

  }
  
  render() {
    <div onClick={() => {this.props.onOpen('web')}}> </div>
  }
}

Comments

[Роман Александрович]

Должно работать. Попробуйте так

import React from 'react';

class Component1 extends React.Component {
  constructor() {
  }

func = (category) => {
      //do something
console.log(category)

    }
  
  render() {
    <Component2 onOpen={(val)=>this.func(val)} />
  }
}


class Component2 extends React.Component {
  constructor() {

  }
  
  render() {
    <div onClick={() => this.props.onOpen('web')}> </div>
  }
}

[Петр Мухуров]

если юзаете constructor(), не забывайте в нем писать super()

constructor(props) {
  super(props);
  //do smth
}

Answer 1

[Вадим]

Пропустили передачу props в конструктор, вызов super(props), метод объявляется немного иначе и пропустили return в render.
Не проверял на работоспособность, но должно быть как-то так:

import React from 'react';

class Component1 extends React.Component {
    constructor(props) {
        super(props);
        this.func = this.func.bind(this);
    }

    func(name) {
        console.log(`I am ${name}`);
    }

    render() {
        return ( <Component2 onOpen = {this.func}/>)
    }
}


class Component2 extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div onClick={() => {this.props.onOpen('Groot')}}> Who am i ? </div>
        )
    }
}