隱藏父反應組件，當你點擊一個子組件

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>; 
    } 
}