Question

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

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

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

Answer 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 中重新渲染条件渲染组件

1 个答案: