Here's a js fiddle hiển thị câu hỏi đang hoạt động.Làm thế nào để nối thêm vào dom trong React?
Trong hàm kết xuất của một thành phần, tôi hiển thị một div có lớp .blah. Trong componentDidMount chức năng của các thành phần tương tự, tôi đã mong đợi để có thể chọn lớp .blah và gắn với nó như thế này (kể từ khi thành phần đã gắn)
$('.blah').append("<h2>Appended to Blah</h2>");
Tuy nhiên, nội dung nối không hiển thị. Tôi cũng đã thử (cũng được hiển thị trong fiddle) để chắp thêm theo cách tương tự nhưng từ một thành phần cha vào một thành phần phụ, với cùng một kết quả, và cũng từ tiểu hợp phần vào không gian của thành phần cha với cùng một kết quả. Logic của tôi để cố gắng sau này là người ta có thể chắc chắn hơn rằng các yếu tố dom đã được trả lại.
Cùng lúc đó, tôi đã có thể (trong componentDidMount chức năng) để getDOMNode và thêm vào đó
var domnode = this.getDOMNode();
$(domnode).append("<h2>Yeah!</h2>")
chưa lý do để làm với phong cách CSS Tôi muốn để có thể thêm vào sau một div với một lớp mà tôi biết. Ngoài ra, vì theo docsgetDOMNode bị phản đối, và nó không thể sử dụng thay thế cho getDOMNode để làm điều tương tự
var reactfindDomNode = React.findDOMNode();
$(reactfindDomNode).append("<h2>doesn't work :(</h2>");
Tôi không nghĩ getDOMNode hoặc findDOMNode là cách chính xác để làm những gì tôi m cố gắng làm.
Câu hỏi: Có thể nối thêm một id hoặc lớp cụ thể trong React không? Cách tiếp cận những gì tôi nên sử dụng để thực hiện những gì tôi đang cố gắng để làm (getDOMNode mặc dù nó bị phản đối?)
var Hello = React.createClass({
componentDidMount: function(){
$('.blah').append("<h2>Appended to Blah</h2>");
$('.pokey').append("<h2>Can I append into sub component?</h2>");
var domnode = this.getDOMNode();
$(domnode).append("<h2>appended to domnode but it's actually deprecated so what do I use instead?</h2>")
var reactfindDomNode = React.findDOMNode();
$(reactfindDomNode).append("<h2>can't append to reactfindDomNode</h2>");
},
render: function() {
return (
<div class='blah'>Hi, why is the h2 not being appended here?
<SubComponent/>
</div>
)
}
});
var SubComponent = React.createClass({
componentDidMount: function(){
$('.blah').append("<h2>append to div in parent?</h2>");
},
render: function(){
return(
<div class='pokey'> Hi from Pokey, the h2 from Parent component is not appended here either?
</div>
)
}
})
React.render(<Hello name="World" />, document.getElementById('container'));
nếu bạn nên tránh biến đổi dom, sau đó làm thế nào để mọi người sử dụng các thư viện như d3.js gắn thêm vào dom? nó có phù hợp không? – BrainLikeADullPencil
Ah d3 ... vâng, có những ngoại lệ đối với nó, đặc biệt là khi nói đến thư viện của bên thứ ba. Nếu bạn tìm kiếm React + d3, bạn sẽ tìm thấy một vài cách tiếp cận cách xử lý này. –
ngoại lệ? bạn có nghĩa là có những ngoại lệ cho quy tắc chung mà ta nên tránh đột biến dom? – BrainLikeADullPencil