以在每次单击时显示不同的组件(使用钩子)

Question

我想在每次单击button时显示不同的component。我确信syntax错了，有人能帮我吗？浏览器未加载我很想解释一下哪里出错了

单击按钮后，App component上应显示一个组件(而不是HomePage(。帮助我理解正确的方法。

谢谢！

App.js

import React, {useState} from 'react';
import './App.css';
import Addroom from './components/Addroom.js'
import HomePage from './components/HomePage.js'
function App() {
const [flag, setFlage] = useState(false);

return (
<div className="App">

<h1>My Smart House</h1>
<button onClick={()=>{setFlage({flag:true})}}>Addroom</button>
<button onClick={()=>{setFlage({flag:false})}}>HomePage</button>

{setState({flag}) && (
<div><Addroom  index={i}/></div>
)}
{!setState({flag}) && (
<div><HomePage index={i}/></div>
)}
</div>
)
}
export default App;

主页

import React from 'react'
export default function HomePage() {
return (
<div>
HomePage
</div>
)
}

Addroom

import React from 'react'
export default function Addroom() {
return (
<div>
Addroom
</div>
)
}

Answer 1

我没有测试它，但正如我所看到的，它应该是这样的：

<button onClick={()=>setFlage(true)}>Addroom</button>
<button onClick={()=>setFlage(false)}>HomePage</button>
{flag && (
<div><Addroom index={i}/></div>
)}
{!flag && (
<div><HomePage index={i}/></div>
)}

您需要用Boolean的参数true或false调用setFlage函数，它会更改您想要读取的flag变量。

Answer 2

尝试以下操作。

function App() {
const [flag, setFlage] = useState(false);
return (
<div className="App">
<h1>My Smart House</h1>
<button
onClick={() => {
setFlage(true);
}}
>
Addroom
</button>
<button
onClick={() => {
setFlage(false );
}}
>
HomePage
</button>
{flag ? <Addroom /> : <HomePage /> }

</div>
);
}

Answer 3

您缺少渲染方法，还应该使用setState进行反应式渲染。(当您使用状态变量时，一旦值更改，呈现方法将重新生成输出，因此这将加载您的条件组件。

https://jsfiddle.net/khajaamin/f8hL3ugx/21/

--HTML

class Home extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div> In Home</div>;
}
}
class Contact extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div> In Contact</div>;
}
}
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
flag: false,
};
}
handleClick() {
this.setState((state) => ({
flag: !state.flag,
}));
console.log("hi", this.state.flag);
}
getSelectedComp() {
if (this.state.flag) {
return <Home></Home>;
}
return <Contact></Contact>;
}
render() {
console.log("refreshed");
return (
<div>
<h1>
Click On button to see Home component loading and reclick to load back
Contact component
</h1
<button onClick={() => this.handleClick()}>Switch Component</button>
{this.getSelectedComp()}
</div>
);
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"));