[英]to display a different component with each click (using hooks)
I want to display a different component
with each button
click.我想在每次单击
button
时显示不同的component
。 I'm sure the syntax
is wrong, can anyone help me?我确定
syntax
是错误的,有人可以帮助我吗? The browser doesn't load I would love an explanation of where I went wrong浏览器无法加载我希望能解释一下我哪里出错了
One component (instead of HomePage
) should display on the App component
after clicking the button.单击按钮后,一个组件(而不是
HomePage
)应显示在App component
上。 Help me to understand the right method.帮助我理解正确的方法。
Thanks!谢谢!
App.js应用程序.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;
HomePage主页
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>
)
}
I didn't test it but as i can see it should be something like this:我没有测试它,但我可以看到它应该是这样的:
<button onClick={()=>setFlage(true)}>Addroom</button>
<button onClick={()=>setFlage(false)}>HomePage</button>
{flag && (
<div><Addroom index={i}/></div>
)}
{!flag && (
<div><HomePage index={i}/></div>
)}
You need to call setFlage
function with argument of Boolean
saying true
or false
and it changes the flag
variable that you want to read.您需要使用 Boolean 的参数调用
setFlage
Boolean
为true
或false
,它会更改您要读取的flag
变量。
Try the following.试试下面的。
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>
);
}
You are missing render methods and also you should use setState for reactive rendering.( when you use state variables and once value changed render method will rebuild output so this will load your conditinal component.您缺少渲染方法,并且您应该使用 setState 进行反应性渲染。(当您使用 state 变量并且一旦值更改渲染方法将重建 output 因此这将加载您的条件组件。
https://jsfiddle.net/khajaamin/f8hL3ugx/21/
https://jsfiddle.net/khajaamin/f8hL3ugx/21/
--- HTML --- 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"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.