在reactjs中单击按钮时删除组件答案

【问题标题】：remove component on button click in reactjs在reactjs中单击按钮时删除组件
【发布时间】：2018-07-23 11:52:10
【问题描述】：

我在app里有这个结构，每一层都是一个组件：

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 中执行此操作？我尝试将密钥传递给onClick 并将display 设置为none，但我无法通过其密钥获取组件！

【问题讨论】：

您可以发布您尝试过的内容吗？
查看更新......
这在一定程度上取决于您的实现。你能显示Assigning的代码吗？
使用 refs。那会解决你的问题。此外，您实际上并不需要在此处访问密钥。密钥仅用于内部反应以单独识别每个节点。作为一个 react 开发者，我们并没有真正使用 key 本身。
@UtkarshPramodGupta 如果您缺少访问密钥，react 会发出警告是有原因的

标签： reactjs

【解决方案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的关闭函数就会被触发

【讨论】：