v0.13.0'da tanıtılan React.findDOMNode
yöntemini kullanarak, this.props.children
üzerinden eşleme yaparak bir ebeveyne aktarılan her çocuk bileşenin DOM düğümünü alabiliyorum.
Ancak, alt öğelerden bazıları Bileşenler yerine React Öğeleri olursa (örneğin, alt öğelerden biri JSX ile oluşturulmuş bir <div>
ise) React bir değişmez ihlali hatası atar.
Çocuğun hangi sınıf olduğuna bakılmaksızın montajdan sonra her çocuğun doğru DOM düğümünü almanın bir yolu var mı?
this.props.children` ya bir ReactElement ya da bir ReactElement dizisi olmalıdır, ancak bileşenler olmamalıdır.
Alt öğelerin DOM düğümlerini almak için onları klonlamanız ve onlara yeni bir ref atamanız gerekir.
render() {
return (
<div>
{React.Children.map(this.props.children, (element, idx) => {
return React.cloneElement(element, { ref: idx });
})}
</div>
);
}
Daha sonra alt bileşenlere this.refs[childIdx]
aracılığıyla erişebilir ve DOM düğümlerini ReactDOM.findDOMNode(this.refs[childIdx])
aracılığıyla alabilirsiniz.
Herhangi bir DOM öğesine erişmek istiyorsanız ref
özniteliğini eklemeniz yeterlidir ve bu öğeye doğrudan erişebilirsiniz.
<input type="text" ref="myinput">
Ve sonra doğrudan yapabilirsiniz:
componentDidMount: function()
{
this.refs.myinput.select();
},
Herhangi bir öğeye ref
eklediyseniz, ReactDOM.findDOMNode()
kullanmanıza gerek yoktur.
Bu, refs niteliği kullanılarak mümkün olabilir.
Bir <div>
e ulaşmak istediğiniz örnekte kullanmak isteyeceğiniz şey <div ref="myExample">
dir. Daha sonra React.findDOMNode(this.refs.myExample)
kullanarak bu DOM düğümünü elde edebilirsiniz.
Buradan her bir alt öğenin doğru DOM düğümünü elde etmek `this.refs.myExample.children' üzerinden eşleme yapmak kadar basit olabilir (henüz test etmedim), ancak en azından ref niteliğini kullanarak belirli bir monte edilmiş alt düğümü yakalayabileceksiniz.
Burada'daha fazla bilgi için resmi react belgeleri bulunmaktadır.