reactjs - React - 单击按钮用另一个组件替换一个组件

Question

我有两个 React 组件，我想点击其中一个按钮以将其完全替换为第二个。

这是我的应用程序组件:

const App = () =>{

    const[showMarketing, setShowMarketing] = useState(false);
    const[showLanding, setShowLanding] = useState(true)

    const toggleViews = () =>{
        setShowMarketing(!showMarketing);
        setShowLanding(!showLanding);
    }

  return (
      <div>
        {showMarketing && <Marketing/>} {showLanding && <Landing toggleViewFn={toggleViews}/> }
      </div>
  );
}
export default App;

这是默认呈现的组件:

const Landing = ({toggleViewFn}) =>(
    <div className="shrink-wrapper">
        <header className="small-vertical">
            <figure className="logo">
                <a href="">
                    <img src={logo} onClick={() => toggleViewFn()}/>
                </a>
            </figure>
            <nav>

            </nav>
        </header>
    </div>
    );

这是我要在 img click 上呈现的组件:

const Marketing = () => (
    <div>
      ......Something here
    </div>

);

在当前代码中，切换发生了一秒钟，然后 UI 返回到 Landing 组件。我似乎无法理解为什么？我是 React 的新手，感谢任何帮助。

Answer 1

问题是你的 <img/>与 onClick被 anchor 包裹着——当你点击 <img/> ，点击处理程序被触发，但 anchor 点击也被注册并且浏览器导航。我怀疑你是否去掉包装 <a>这将按预期工作。

最终，如果您尝试使用它进行路由，最好利用像 React Router 这样的库。 ;虽然您可以尝试自己管理自己的路由，但它可能很复杂并且充满了可访问性陷阱(例如，使用带有空 href 的 anchor 来包装带有 onClick 处理程序的项目不是特别方便)。希望这会有所帮助。