reactjs - 单击子组件时隐藏父 react 组件

Question

我是 javascript 世界的新手，使用 react.js 创建前端应用程序。以下是我无法编码的场景。我想显示一个项目列表，这样当我单击列表中的任何一个项目时，我只会看到所选项目的详细信息并删除项目 View 。我尝试使用 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>;
     }
 }