在 React 中重新渲染条件渲染组件

Posted 2023-02-22

【中文标题】在 React 中重新渲染条件渲染组件

【英文标题】：Re-Render Conditional Rendered Components in React

【发布时间】：2021-06-07 02:29:13

【问题描述】：

我有一个接受一些输入的组件，然后当我在单击时提交该输入时，单击时提交函数会将 useState 挂钩设置为 true ( setBoolInput(true) )，然后在我的 App.js 文件中，将渲染一个附加组件，因为 if(boolInput) 传递为 true。

现在，如果我再次单击同一个提交按钮，它不会重新渲染我的附加组件，因为我的状态已经设置为 true，即使我更改了输入。

我试图找出在我的代码中我可以再次将 BoolInput 设置为 false 的位置，以便在我点击提交时使用更新的输入重新渲染附加组件。那么本质上，如何重新渲染条件渲染？

【问题讨论】：

您可以尝试使用setTimeout，具体取决于您希望组件呈现多长时间。经过一段时间后，负责跟踪组件是否可见的状态可以设置为false。

【参考方案1】：

它没有导致重新渲染的原因是因为 react 使用了一个称为虚拟 DOM 的概念，它只在发生变化时更新 DOM。在您的情况下，您渲染的组件已经从第一次单击中渲染，因此它不会再次重新渲染。 这是您可以尝试的方法-

function App() 
  const inputRef = React.useRef();
  const [inputValue, setInputValue] = React.useState();

  return (
    <div>
      <input type = 'text' ref = inputRef />
      <button onClick = () => setInputValue(inputRef.current.value)>Click Me!</button>
      <p>inputValue</p>
    </div>
  )

【讨论】：

谢谢你 - 我会试一试！所以即使我在我的输入字段中输入“狗”，点击提交，然后我的组件在它下面显示狗....然后将我的输入更改为“猫”并再次点击提交，它不会重新渲染组件下面？

不会的。由于您将输入字段从狗更改为猫，因此单击按钮时状态将更新为猫。并且 React 将重新渲染它，因为它与之前的渲染不同。