reactjs - 元素处于内部条件时如何使用useRef？

问题在于useRef是在第一次渲染期间触发的。
可能有问题的两个例子。



什么时候可以有一些负担

const Problem1 = () => {
 const ref = useRef();

 if (loading)
     return null;

 return <input ref={ref} value={} />;

}

当ref在某个条件内时。

const Problem2 = () => {
 const ref = useRef();

 return user ? <input ref={ref} value={user.name} /> : <Exit >;

}

沙箱示例
https://codesandbox.io/s/nifty-feynman-z68k0

在第二种情况下，我至少可以在显示开头显示元素：无。但是如何解决第一个问题我不知道。

在这些情况下的最佳做法是什么？

最佳答案

看看这是否适合您：
从React DOCS：https://reactjs.org/docs/hooks-reference.html#useref

useRef（）
但是，useRef（）不仅对ref属性有用。与在类中使用实例字段的方式类似，保留任何可变值都很方便。
之所以有效，是因为useRef（）创建了一个普通的JavaScript对象。 useRef（）和自己创建{current：...}对象之间的唯一区别是useRef将在每个渲染器上为您提供相同的ref对象。

useRef对象在渲染之间不会改变。对于具有useRef属性的current对象，您将始终具有相同的引用。可能会改变的是您在该current属性中保留的内容。

function App() {

  const input1_ref = React.useRef(null);
  const input2_ref = React.useRef(null);
  const [showInput2, setShowInput2] = React.useState(false);

  React.useEffect(()=>{
    input1_ref.current ?
      console.log('Input1 has been mounted...')
    : console.log('Input1 has NOT been mounted...');
    input2_ref.current ?
      console.log('Input2 has been mounted...')
    : console.log('Input2 has NOT been mounted...');
  });


  return(
    <React.Fragment>
      <div>Input 1</div>
      <input type='text' ref={input1_ref}/>
      {showInput2 &&
        <React.Fragment>
          <div>Input 2</div>
          <input type='text' ref={input2_ref}/>
        </React.Fragment>
      }
      <div>
        <button onClick={()=>setShowInput2((prevState)=>!prevState)}>Click</button>
      </div>
    </React.Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

关于reactjs - 元素处于内部条件时如何使用useRef？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58132227/