Question

我强迫元素像这样聚焦

/**focusing the element if the element is active */
    componentDidUpdate() { 
        console.log(this.activeElementContainer);
        if(this.activeElementContainer!==undefined && this.activeElementContainer!==null) {
            /** need to focus the active elemnent for the keyboard bindings */
            this.activeElementContainer.focus();            
        }
    }

我的渲染有条件渲染，元素是从数组中动态渲染的，

假设我在div中有一个元素，我在工具箱中添加另一个元素。在这种情况下，我需要关注我拖动的最后一个元素。

render() {

let childControl= <span tabIndex="-1" dangerouslySetInnerHTML={{__html: htmlToAdd}}></span>;
if(this.props.activeItem){

childControl=<span  ref={ (c) => this.activeElementContainer = c } 
tabIndex="0"  dangerouslySetInnerHTML={{__html: htmlToAdd}}></span>

}
//later I ma using childControl to array and it works fine.

日志说，第一次它工作正常

但是，第二次this.activeElementContainer是undefined

有没有替代方法或可能的解决方案？

事情是我当时只需要关注一个元素。

请记住：Activecontrol有很多事情要做，因为它可以有右键菜单，拖动等等。所以，我需要单独渲染它。

Answer 1

读完这个github之后：

这是打算（在其他地方讨论），但是不直观   行为。每次渲染时：

<Value ref={(e) => { if (e) { console.log("ref", e); }}} />你是   生成一个新函数并将其作为ref-callback提供。应对   无法知道它（出于所有意图和目的）   与前一个相同，因此React将新的ref回调视为   与前一个不同，并用当前初始化它   参考

PS。怪责怪：P

Source

我将代码更改为

<span id={this.props.uniqueId} ref={(c)=>
                    {if (c) { this.activeElementContainer=c; }}
                } tabIndex="0"   dangerouslySetInnerHTML={{__html: htmlToAdd}}></span>

添加是否是真正的变化。现在，它有一个参考。

对于遇到此问题的其他人：我也需要编写自定义函数，在 componentDidUpdate 中我仍然得到旧参考，

ref={(c)=>{if (c) { this.activeElementContainer=c; this.ChangeFocus(); }}

添加这个对我来说是完美的解决方案

ReactJS失去了元素的引用

1 个答案: