时间戳

首页 > 解决方案 > 不必要的条件渲染不会在脚本标签版本 React 中完全重新渲染相同级别的元素

javascript - 不必要的条件渲染不会在脚本标签版本 React 中完全重新渲染相同级别的元素

问题描述

因此，我想通过使用状态变量和 switch case 对多步表单进行一些“分页”，但遇到了问题。有 2 个下拉菜单，都应该设置为默认值。但是，当您进行分页时，下一个下拉菜单将具有正确的数据，但会保持上一个下拉菜单的位置选择位置。这意味着反应以某种方式“记住”以前渲染中曾经存在的元素。但这不仅仅是下拉菜单

为了测试这个问题，我将其剥离并使用了一个带有基于状态的简单条件渲染的单选菜单。这个问题在codepen中是可重复的

<html>
    <head>
        <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <div id="app">
            <script type="text/babel">
              function App () {
                const [state, setState] = React.useState({
                  pg: 1,
                  notpg: null
                });
                if (state.pg === 1) {
                  return (
                    <div>
                    1
                      <form>
                        <input name="a1" id="c1" type="radio" value="1"/>
                        <input name="a1" id="c2" type="radio" value="2"/>
                      </form>
                      <button type="button" onClick={() => setState({...state, pg: 2})}>changepg</button>
                    </div>
                  );           
                }
                if (state.pg === 2) {
                  return (
                  <div>
                  2
                    <form>
                      <input name="b2" id="d3" type="radio" value="1"/>
                      <input name="b2" id="d4" type="radio" value="2"/>
                    </form>
                    <button type="button" onClick={() => setState({...state, pg: 1})}>changepg</button>
                  </div>
                );
                }
              }
              ReactDOM.render(< App />, document.querySelector('#app'));
              
            </script>
              
          </div>
    </body>
</html>

单选按钮保持前一个按钮的位置，即使理论上它应该完全重新渲染。我还注意到，如果您将一个元素包装在 div 中并执行此操作，则该部分将正确重新渲染。将空白 div 或其他元素放在 . 所以看起来它正在做一些事情，它们在 return 语句或 DOM 中处于相同的位置

我的问题是为什么会这样，这是一个错误，有没有办法让它不这样做？

标签： javascripthtmlreactjs

解决方案

推荐阅读