时间戳

首页 > 解决方案 > 反应树父节点更新

reactjs - 反应树父节点更新

问题描述

我在反应中创建了一个自定义树面板。每次我更新我选择的树节点（状态）。现在我想在选择孩子时更改根的颜色。我想用 refs 来做，为所有 TreeNode 添加它，然后在 React 中使用 DOM 操作来获取它（据我所知ReactDom.finddomnode）我有 2 个组件 Tree 和 TreeNode Tree 的部分代码

Tree.js
    <TreeNode ref={(el) => this.treeRef = el}

事件单击是 TreeNode 组件中的句柄。现在我想抓住这个事件并更新我的根。使用 ReactDom.findDomNode 时出现错误。任何想法

标签： reactjs

解决方案

您应该使用状态来显示根的颜色。使用 ref 然后操作 DOM 节点来完成这样一个简单的任务违背了 React 的目的。Refs 在特殊情况下使用，这可以使用 react 的 state/props 来完成。

我不知道您对 Tree 的实现，但作为示例，您可以执行以下操作：

render() {
    return <div style={{backgroundColor:this.state.bgColor}}> 
    </div> 
}

changeBGColor(color) {
   this.setState({bgColor:color})

}

现在您可以将changeBGColor方法传递给孩子，然后孩子可以调用它来进行适当的颜色更改。由于我对您的实施信息有限，我无法为您提供确切的解决方案，但我希望这会有所帮助。

推荐阅读