Отправить реквизит для дочернего компонента

Question

Я пытаюсь изменить один component из child component, когда другой дочерний компонент выполняет какое-либо действие.

У меня есть родительский класс:

class Parent extends Component {
  constructor(){
    super();
    this.state={visible:true};
  }
  handleClick = () => {
    this.setState({ visible: !this.state.visible });
  };
  render() {
    return (
      <div>
        <Child1 handleClick={this.handleClick} />
        <Child2 visible={this.state.visible} />
      </div>
    );
  }
}

class Child1 extends Component {
  handleClick = () => {
    console.log(this.props);
    this.props.handleClick();
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

class Child2 extends Component {
  render() {
    return <div>//some codes</div>;
  }
}

Функция handleClick из родительской функции работает один раз.

Затем он продолжает выдавать мне error , говоря, что _this.props.handleClick не является функцией.И со второго раза нет реквизита.

Может кто-нибудь сказать мне, что я делаю не так?

Answer 1

Я сделал это, и это работает:

render() {
  return (
    <div>
      <Child1 handleClick={this.handleClick} />
      { this.state.visible && <Child2 />}
    </div>
  );
}

Для справки: https://codesandbox.io/s/5zl8q7l744

Надеюсь, это поможет.