Javascript 如何在（条件渲染）中使用ref

我想使用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}

{this.state.filterActive？
时间范围
：null}

ref为空。

请尝试此操作

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

render（）{
返回(
{this.state.filterActive？（时间范围）：（null）}
)}

像这样的东西怎么样：

// 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>

---

我也面临同样的问题，但我正在使用挂钩。我找到了另一个解决办法。通过使用交点观测器，我们可以解决这个问题

在钩子中，使用“react intersection oberserver”中的“useInView”钩子，

//使用对象销毁，因此不需要记住确切的顺序

const { ref, inView, entry } = useInView(options);

//或数组销毁，使自定义字段名变得容易

const [ref, inView, entry] = useInView(options);

将“ref”附加到DOM节点，“inView”将返回一个布尔值，无论您的DOM节点是否在视图中，“entry”将授予访问DOM节点属性的权限

import React from 'react';
import { useInView } from 'react-intersection-observer';
 
const Component = () => {
  const { ref, inView, entry } = useInView({
    /* Optional options */
    threshold: 0,
  });
 
  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  );
};

从“React”导入React；
从“react intersection observer”导入{useInView}；
常量组件=（）=>{
常量{ref，inView，entry}=useInView({
/*可选选项*/
阈值：0，
});
返回(
{`视口内的标头${inView}.`}
);
};

这解决了我的问题

---

对于基于类的组件，请阅读此处：

不是答案，但您可以将代码重写为

{this.state.filterActive&&Time Range}

-如果为false，则无需三元运算符返回

null

。您好@JamesWhiteley非常感谢您的帮助。实际上，这只是一个假人。我有一个完整的部分，需要有条件地呈现。在该部分中有许多元素，我想在其中一个元素中使用ref。您何时将

filterActive

状态设置为true？请也共享该代码。单击按钮@rinkeshgollwala，请共享完整的组件。如果没有条件，我无法显示更多元素。这只是一个示例。如果我用css隐藏，任何人都会更改css并看到这些元素。普通用户不会对css有任何想法。甚至不知道你用css隐藏了你的元素。无论如何，为了得到元素的ref，它必须被渲染。因此，我建议用css隐藏它。是的，但我不能用css隐藏。你需要ref在元素呈现之后还是之前完成它的工作？

import React from 'react';
import { useInView } from 'react-intersection-observer';
 
const Component = () => {
  const { ref, inView, entry } = useInView({
    /* Optional options */
    threshold: 0,
  });
 
  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  );
};