隐藏父反应组件，当你点击一个子组件

Question

我是JavaScript新手，并且使用react.js创建一个前端应用程序。以下是我无法编码的场景。 我想显示一个项目列表，当我单击列表中的任何一个项目时，我只看到所选项目的详细信息并删除项目的视图。我尝试使用react-router库，但react-router以嵌套方式工作，子组件的细节在父组件（项目列表）下呈现。它不隐藏父组件。

Answer 1

您可以将函数传递给父组件的子项onClick，并处理该函数中的隐藏事件。一个简单的工具看起来像这样：

class Parent extends React.Component { 
    constructor() { 
     super(...arguments); 
     this.state = {hide: false}; 
    } 
    handleChildClick() { 
     this.setState({hide: true}); 
    } 
    render() { 
     const {hide} = this.state; 
     if (hide) { 
      return null; 
     } 
     return <Child onClick={this.handleChildClick.bind(this)} />; 
    } 
} 

class Child extends React.Component { 
    render() { 
     const {onClick} = this.props; 
     return <button onClick={onClick}>Hide Parent</button>; 
    } 
}