将支柱发送给子组件

Question

我正在尝试在另一个子组件执行某些操作时更改component的{​​{1}}。

我在这里有一个父类：

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不是函数。并且第二次没有道具。

谁能告诉我我做错了什么？

Answer 1

我做了这个并且有效：

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

供参考：https://codesandbox.io/s/5zl8q7l744

希望它有所帮助。