reactjs - 删除reactjs中单击按钮上的组件

Question

我在应用程序中有这样的结构，每个级别都是一个组件:

Assigning
├── Assignee (key='user0')
│   ├── AssigneeTask (key='user0task0')
|   |   └── button (onClick)
│   ├── AssigneeTask (key='user0task1')
|   |   └── button (onClick)
|   └── AssigneeTask (key='user0task2')
|       └── button (onClick)
├── Assignee (key='user1')
└── Assignee (key='user2')

当我使用组件的键单击其中的按钮时，我想删除 Assignee 组件，我该如何在reactjs中执行此操作？ 我尝试将 key 传递给 onClick 并将 display 设置为 none，但我无法通过其 key 获取组件!

Answer 1

您可以使用状态/功能提升:

class Container extends Component {
    [...]
    render() {
        return this.state.opened && <ContainerButton clickedButton={this.close} />
    }

    close = () => {
        this.setState({opened: false});
    }
}

class ContainerButton extends Component {
    [...]

    render() {
        <button onClick={this.props.clickedButton} />
    }
}

如果您现在触发按钮上的 onClick，则会触发 Container 的关闭函数