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

单击子组件时隐藏父反应组件

1 个答案: