ReactJS componentDidMount + render

Question

我目前正在使用react来创建d3可视化.我对方法render和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()总是引用渲染函数中的顶级元素吗？我实际上要做的是在最里面div(.Chart)内渲染d3图表.我第一次尝试做this.getDOMNode().find('.Chart')但是没有用.

第一个问题:我知道我不应该尝试触摸真正的DOM,但是如何在VirtualDOM上选择更多内容呢？

第二个问题:我知道,鉴于我对此很陌生,我可能做错了.你能在这里建议一个更好的方法吗？

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

预先感谢您的帮助!

PS我有一个问题:

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

Answer 1

是的,getDOMNode()返回已render编辑的最外层DOM元素.

A1.我建议你使用一个ref属性(文档),它提供对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);