ReactJS componentDidMount +渲染

小编典典

ReactJS componentDidMount +渲染

reactjs

我目前正在使用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()总是引用render函数中的顶级元素？我实际上想做的是在最里面的div（.Chart）中渲染d3图表。我首先尝试做，this.getDOMNode().find('.Chart')但是没有用。

第一个问题：我知道我不应该在这里尝试接触真正的DOM，但是我将如何在VirtualDOM的更深层选择呢？

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

第三个问题：我想在同级添加图表图例div的".Chart"。我应该为此创建一个新组件吗？还是可以在d3Chart中使用选择器来做到这一点？

预先感谢您的帮助！

PS我有一个侧面的问题：

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

阅读 307

2020-07-22

共1个答案

小编典典

是的，getDOMNode()返回已render编辑的最外面的DOM元素。

A1。我建议您使用一个ref属性（documentation），该属性提供对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);

2020-07-22