[英]Maintaining Component Refs Through React.cloneElement
I have been testing the possible limitations/dangers of using React.cloneElement()
to extend a component's children
. 我一直在测试使用的可能的限制/危险React.cloneElement()
来扩展组件的children
。 One possible danger I've identified is the possible overwriting of props such as ref
and key
. 我发现的一种可能的危险是可能会覆盖ref
和key
类的道具。
However, as per React's 0.13 release candidate (back in 2015): 但是,根据React的0.13版本候选对象 (早在2015年):
However, unlike JSX and cloneWithProps, it also preserves refs. 但是,与JSX和cloneWithProps不同,它还保留引用。 This means that if you get a child with a ref on it, you won't accidentally steal it from your ancestor. 这意味着,如果您得到一个带有裁判的孩子,则不会意外地从祖先那里偷走它。 You will get the same ref attached to your new element. 您将获得与新元素相同的引用。
[...] [...]
Note:
React.cloneElement(child, { ref: 'newRef' })
DOES override the ref so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs. 注意:React.cloneElement(child, { ref: 'newRef' })
确实会覆盖ref,因此,除非您使用callback-refs,否则两个父对象仍然不可能对同一个孩子拥有ref。
I have written a small React application that clones children components pushed through, testing for the validity of refs at two levels: 我编写了一个小的React应用程序 ,该应用程序克隆了推入的子组件,并在两个级别上测试ref的有效性:
class ChildComponent extends React.Component{
constructor(props){
super(props);
this.onClick = this.onClick.bind(this);
this.extendsChildren = this.extendChildren(this);
}
onClick(e) {
e.preventDefault();
try{
alert(this._input.value);
}catch(e){
alert('ref broken :(');
}
}
extendChildren(){
return React.Children.map(this.props.children, child => {
return React.cloneElement(
child,
{
ref: ref => this._input = ref
}
);
});
}
render() {
return(
<div>
<button onClick={this.onClick}>
ChildComponent ref check
</button>
{this.extendChildren()}
</div>
);
}
}
class AncestorComponent extends React.Component{
constructor(props){
super(props);
this.onClick = this.onClick.bind(this);
}
onClick(e) {
e.preventDefault();
try{
alert(this._input.value);
}catch(e){
alert('ref broken :(');
}
}
render() {
return (
<div>
<p>
The expected behaviour is that I should be able to click on both Application and ChildComponent check buttons and have a reference to the input (poping an alert with the input's value).
</p>
<button onClick={this.onClick}>
Ancestor ref check
</button>
<ChildComponent>
<input ref={ref => this._input = ref} defaultValue="Hello World"/>
</ChildComponent>
</div>
);
}
}
However, cloningElements inside my ChildComponent overwrites the AncestorComponent's ref
prop from the input field, where I would expect that ref
prop to be preserved, alongside the new ref
I defined as part of the React.cloneElement
. 但是,ChildComponent内部的cloningElements会覆盖输入字段中的AncestorComponent的ref
prop,我希望在那里保留该ref
prop,以及我定义为React.cloneElement
一部分的新ref
。
You can test this by running the CodePen . 您可以通过运行CodePen进行测试。
Is there anything I'm doing wrong, or has this feature been dropped since? 我做错什么了吗,或者此功能此后被删除了?
As per Dan Abramov's response , overwriting the reference, even with a callback, is still going to overwrite the reference. 根据Dan Abramov的响应 ,即使使用回调覆盖引用,仍将覆盖引用。 You'll need to call the current reference as part of the callback declaration: 您需要在回调声明中调用当前引用:
return React.Children.map(this.props.children, child =>
React.cloneElement(child, {
ref(node) {
// Keep your own reference
this._input = node;
// Call the original ref, if any
const {ref} = child;
if (typeof ref === 'function') {
ref(node);
}
}
)
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.