ReactJS componentDidMount + 渲染

我目前正在使用 React 创建 d3 可视化。我对两者之间的关系有点困惑render and componenetDidMount方法（方法是正确的术语吗？）。这是我所拥有的（为了简单起见，我排除了一些代码）：

var Chart = React.createClass({
  componentDidMount: function () {
    var el = this.getDOMNode();
    console.log(el);
    d3Chart.create(el, {
        width: '500',
        height: '300'
    }, this.getChartState(),this.getAccessState);
  },

  render: function () {
    return (
        <div className="row pushdown">
                <div className="d3-block">
                    <div className="Chart" />
                </div>
        </div>
    );
  }
}

3号线，el被分配this.getDOMNode();它始终指向渲染函数中的顶级元素（div "row pushdown"）。也是如此this.getDOMNode()总是引用渲染函数中的顶级元素？我实际上想做的是在最里面渲染 d3 图表div (.Chart）。我首先尝试做this.getDOMNode().find('.Chart')但这没有用。

第一个问题：我知道我不应该尝试在这里接触真实的 DOM，但是我该如何在 VirtualDOM 上进一步选择一些东西呢？

第二个问题：我知道，鉴于我对此很陌生，我可能以错误的方式这样做。你能在这里建议一个更好的方法吗？

第三个问题：我想在同级中添加图表图例div of ".Chart"。我应该为此创建一个新组件吗？或者在我的 d3Chart 中我可以使用选择器来执行此操作吗？

预先感谢您的帮助！

附：我有一个侧面问题：

我见过人们使用React.render(<Chart />,document.body)而不是使用React.createElement在那之内。有人可以向我解释其中的区别吗？

Yes, getDOMNode()返回最外层的 DOM 元素rendered.

A1。我建议你使用ref属性 （文档 http://facebook.github.io/react/docs/more-about-refs.html#the-ref-attribute)，它提供了对 DOM 元素的引用以供以后使用：

<div ref="chart" className="Chart" />

componentDidMount: function() {
    // << you can get access to the element by name as shown below
    var chart = this.refs.chart; 
    // do what you want here ...
}

A2。虽然最终您可能希望将代码重构为多个组件，但您创建的内容没有任何问题（假设您尝试ref上面提到的选项）。

A3。由于图例代表了一个非常不同的功能（并且是孤立的），因此创建一个独特的组件将是典型的 React。你可能还有一个Chart该组件既包含实际的图表可视化，又包含另一个显示图例的组件。这是一个很好的关注点分离。但是，您也可以考虑 Flux 模型，其中每个组件都会监​​听更改并完全独立地渲染其视觉效果。如果它们紧密地结合在一起，Flux 模型可能就没那么有意义了。

侧面：使用 JSX，您可能会看到：

React.render(<App />, document.body)

那只会渲染App进入文档正文内容。

这相当于预编译的 JSX：

React.render(React.createElement(App, null), document.body);