ReactJS componentDidMount +渲染 [英] ReactJS componentDidMount + render
问题描述
我目前正在使用react来创建d3可视化.我对render和componenetDidMount方法之间的关系有些困惑(方法是正确的术语吗?).这就是我所拥有的(为了简单起见，我排除了一些代码):
I am currently using react to create d3 visualizations. I'm a little confused about the relationship between the render and componenetDidMount methods (is methods the proper term?). Here is what I have (I excluded some code for simplicity):
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')，但这没有用.
On line 3, el gets assigned this.getDOMNode(); which always points to the top level element in the render function (div "row pushdown"). So does this.getDOMNode() always refer to the top level element in the render function? What I'm actually trying to do is render the d3 chart within the innermost div (.Chart). I first tried doing this.getDOMNode().find('.Chart') but that didn't work.
第一个问题:我知道我不应该在这里尝试触摸真正的DOM，但是我将如何在VirtualDOM上进行进一步的选择?
First question: I know that I shouldn't be trying to touch the real DOM here but how would I go about selecting something further down on the VirtualDOM?
第二个问题:我知道，鉴于我对此很陌生，所以可能以错误的方式这样做.您能在这里建议一个更好的方法吗?
Second question: I know that, given I am very new to this, am probably doing this the wrong way. Can you suggest a better method here?
第三个问题:我想在".Chart"的同级div中添加图表图例.我应该为此创建一个新组件吗?还是可以在d3Chart中使用选择器来做到这一点?
Third question: I want to add a chart legend in a sibling div of ".Chart". Should I be creating a new component for this? Or in my d3Chart can I use selectors to do this?
预先感谢您的帮助！
P.S.我有一个问题:
P.S. I have one side question:
我已经看到人们在其中使用React.render(<Chart />,document.body)而不是使用React.createElement.有人可以给我解释一下吗?
I've seen people use React.render(<Chart />,document.body) instead of using React.createElement within that. Could somebody explain to me the difference?
推荐答案
是的，getDOMNode()返回被render编辑的最外面的DOM元素.
Yes, getDOMNode() returns the outermost DOM element that was rendered.
A1.我建议您使用ref属性( documentation )，该文档提供了对DOM元素的引用，供以后使用:
A1. I'd suggest you use a ref attribute (documentation) which provides a reference to the DOM element for later usage:
<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选项).
A2. While ultimately you might want to refactor your code into multiple components, there's nothing wrong with what you've created (assuming you try the ref option mentioned above).
A3.由于图例代表了非常不同的功能(并且是独立的)，因此创建独特的组件将是典型的React.您可能仍然有一个Chart组件，它既包含实际的图表可视化，又包含另一个显示图例的组件.这是一个很好的关注点分离.但是，您还可以考虑一个Flux模型，其中每个组件都侦听更改并完全独立地呈现其视觉效果.如果它们紧密配合，则Flux模型可能没有太大意义.
A3. As the legend would represent a very different piece of functionality (and isolated), creating a distinct component would be typical React. You might still have a Chart component that contains both the actual chart visualization but also has another component which displays a legend. It's a nice separation of concerns. But, you could also consider a Flux model where each component listens for changes and renders its visuals completely independently. If they work tightly together, a Flux model may not make as much sense.
侧面:使用JSX，您可能会看到:
Side: Using JSX, you might see:
React.render(<App />, document.body)
这只会将App渲染到文档正文内容中.
That would just render the App into the document body contents.
这等效于预编译的JSX:
That is equivalent to precompiled JSX:
React.render(React.createElement(App, null), document.body);
这篇关于ReactJS componentDidMount +渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
