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

Question

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

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

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

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

当我拨打ReactDOM.findDOMNode(this.refs.ftr);时，第一种方式返回元素（罚款），但第二种方式返回未定义。

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

Answer 1

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

  

我们建议反对它，因为字符串引用有一些问题，是   被认为是遗产，很可能会在未来之一被删除   版本

你可以这样做：

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