Question

我正在使用React和D3生成一个树状图，我想成为我的主页。我想在树形图放大时附加组件。这是沙盒。 https://codesandbox.io/s/oll4qor84q

第一个问题：如果我尝试更改App.js或Treemap.js中的状态，则强制重新渲染会破坏树图，您将无法再缩小。因此，我尝试将所有状态更改降低一级，从而解决了该问题。我的解决方案未显示在沙箱中。基本上，我创建了另一个名为Statemap的组件，该组件控制所有状态更改并位于Treemap下方。因此，如果单击“关于我”，我可以获取被单击的对象，请将“关于我”的状态更改为True。

第二个问题：如何将react组件附加到d3动态生成的dom元素之一中？当我单击以放大“关于我”时，我希望呈现一个新组件，因为关于我的状态更改为True。

我尝试弄乱react-dom，但遇到很多错误，说它找不到Dom元素。我认为我无法在动态d3组件中添加键或引用以供以后引用。

单击“关于我”时将呈现的简单Box组件和CSS：

JAVASCRIPT反应组件

class Box extends Component {
  render(){
    return(
    <div className="Box">This is the div</div>
    )}
}

CSS

.Box{ width:120px; height:120px; background-color: brown; }

我认为这是我需要做的。

ReactDOM.render(<Box />, document.getElementById('About'));

错误：dom元素不存在。

在将属性添加到D3渲染器中以反映我要在DOM中查找的内容时，我尝试记录按ID，类名等进行选择。我还尝试过使用查询选择器来查找DOM元素。

document.querySelector('[title="element title attribute value"]');

我是新来的反应者，所以我不确定是否要以正确的方式处理此问题。任何方向都将不胜感激。

如何将React组件附加到D3生成的DOM？

0 个答案: