点击子组件时隐藏父级 React 组件

Question

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

- Harsha Rastogi

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

- Philip Tzou

---

谢谢Philip。但是，我能够使用react组件context属性以更清晰的方式实现它。我将onClick回调(nextPage)添加到父元素中。 /* onClick回调函数*/ nextPage() { let url = <url_value> this.context.router.push(url); } /* 声明上下文 */ <React组件名称>.contextTypes = { router: React.PropTypes.object.isRequired, }; - Harsha Rastogi