主页 / 问题 / 1434572
Accepted
Андрей Солуянов
Asked:2022-07-30 22:21:01 +0000 UTC2022-07-30 22:21:01 +0000 UTC

React 为什么条件渲染不起作用？

  • 772

有一个功能组件，我想根据条件显示 App 或 Win 组件。但是为什么它不起作用，我做错了什么？

import App from './App';
import Win from './Win';
import { useEffect, useState } from "react";

function Main(){
   const [count, setCount] = useState(true);
 
   let button;

   if (count) {
      button = <Win />;
    } else {
      button = <App />;
    } 
return (
   {button}
)

}
export default Main;
javascript reactjs

1 个回答

  1. Best Answer

    只是没有花括号：

    const {useState} = React;

const Win = () => <button> Win </button>;
const App = () => <button> App </button>;

function Main() {
  const [count, setCount] = useState(true);

  const button = count ? <Win /> : <App />;

  return button;
}

ReactDOM.render(<Main />, document.getElementById('root'));
    <div id="root"></div>

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

    • 1

相关问题