React typescript ref在条件渲染中返回null答案

【问题标题】：React typescript ref return null in conditional renderingReact typescript ref在条件渲染中返回null
【发布时间】：2017-04-17 03:08:39
【问题描述】：

我想使用 React refs，它在静态渲染中很好工作，例如：

<footer ref="ftr"></footer>

但是，不是在条件渲染中，例如：

{footer ?
    <footer ref="ftr"></footer>
: null}

当我调用ReactDOM.findDOMNode(this.refs.ftr); 时，第一种方式返回了元素（很好），但第二种方式返回了我undefined。

如何在条件渲染中做正确的事情？任何答案将不胜感激。

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

你不应该使用in the docs写的字符串引用：

我们建议不要这样做，因为字符串引用有一些问题，是被认为是遗留的，并且很可能在未来的某个时候被删除发布

你可以这样做：

let footerElement: HTMLElement | null = null;
...
{footer ?
    <footer ref={ el => footerElement = el }></footer>
: null}
...
if (footerElement != null) {
    ...
}

【讨论】：