Как использовать ref in (условный рендер)

Question

Я хочу использовать ref, однако я не могу использовать это в условном рендеринге, который изначально ложен.

constructor(props) {
    super(props);
    this.state = { 
      filterActive: false,
    }
    this.firstRef = React.createRef();

}

Если я использую ref в этом: -

{this.state.filterActive ?
    <label ref={this.firstRef}>Time Range</label>
:null}

Ссылка равна нулю.

Answer 1

Как насчет чего-то вроде этого:

// directly assign the element to this.firstRef
// instead of doing it in the constructor
    <label
      ref={(elem) => (this.firstRef = elem)}
      style={{display: this.state.filterActive ? 'inline-block' : 'none'}}
    >
      Time Range
    </label>

и при использовании this.firstRef вы помещаете свою работу внутрь, если это так:

if (this.firstRef) {
// your work
}

Answer 2

попробуйте,

render(){
 return(
{this.state.filterActive ? (<label ref={this.firstRef}>Time Range</label>) : (null)}
)}