隐藏父反应组件，当您单击子组件时

Question

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

Answer 1

您可以将一个函数onClick从父组件传递给子prop，并处理该函数中的隐藏事件。一个简单的实现如下所示：

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