反应树父节点更新

Question

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

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

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

Answer 1

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

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

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

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

}

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