如何使用钩子显示内容并有条件地隐藏内容
如何使用钩子显示内容并有条件地隐藏内容
提问于 2020-10-22 17:21:00
我正在做一个反应项目，当我点击按钮时，我必须显示内容并有条件地隐藏内容。例如，我有四个按钮，第一个按钮是前端按钮，第二个按钮是中间件，第三个按钮是数据库按钮，第四个按钮是应用程序。
默认情况下，当我降落在主页前端时，按钮应该被高亮显示，其余按钮应该是正常的。那时，我只能展示与前端相关的框架或库。
现在，当我单击中间件按钮时，就应该突出显示中间件按钮，我必须显示中间件框架，如Node等。
现在，当我单击Database时，此时应该突出显示Database，我必须显示数据库，比如Mongo，Casandra。
现在，当我单击Apps Button时，应用程序按钮应该会被高亮显示，这时我必须显示应用程序就像React本地程序一样，颤音。
请帮助我完成这项任务。
我是Home.js
import React, { useState } from 'react';
import './Home.css'
const Home = () => {
return (
<div className='container'>
<div className='row'>
<div className='col-3'>
<button className='btn btn-primary mt-3'>Frontend</button>
</div>
<div className='col-3'>
<button className='btn btn-danger mt-3'>Middleware</button>
</div>
<div className='col-3'>
<button className='btn btn-secondary mt-3'>Database</button>
</div>
<div className='col-3'>
<button className='btn btn-info mt-3'>Apps</button>
</div>
</div>
<div className='row mt-3'>
<div className='col-3'>
<h3>React</h3>
</div>
<div className='col-3'>
<h3>Angular</h3>
</div>
<div className='col-3'>
<h3>Vue</h3>
</div>
<div className='col-3'>
<h3>Ember</h3>
</div>
</div>
</div>
)
}
export default Home回答 3
Stack Overflow用户
回答已采纳
发布于 2020-10-22 17:36:20
const Home = () => {
const [selected, setSelected] = useState('frontend')
const frontends = ['React', 'Angular', 'Vue']
const middlewares = ['Node', 'Express', 'Hapi']
const databases = ['MongoDB', 'MySQL', 'Casandra']
const apps = ['React Native', 'Flutter']
let showingArr = []
if (selected === 'frontend') {
showingArr = frontends
} else if (selected === 'middleware') {
showingArr = middlewares
} else if (selected === 'database') {
showingArr = databases
} else if (selected === 'apps') {
showingArr = apps
}
return (
<div className='container'>
<div className='row'>
<div className='col-3'>
<button
className='btn btn-primary mt-3'
onClick={() => setSelected('frontend')}
>Frontend</button>
</div>
<div className='col-3'>
<button
className='btn btn-danger mt-3'
onClick={() => setSelected('middleware')}
>Middleware</button>
</div>
<div className='col-3'>
<button
className='btn btn-secondary mt-3'
onClick={() => setSelected('database')}
>Database</button>
</div>
<div className='col-3'>
<button
className='btn btn-info mt-3'
onClick={() => setSelected('apps')}
>Apps</button>
</div>
</div>
<div className='row mt-3'>
{
showingArr.map(item => (
<div className='col-3'>
<h3>{item}</h3>
</div>
))
}
</div>
</div>
)
}Stack Overflow用户
发布于 2020-10-22 17:27:51
const [show, setShow] = useState(false);
return(
{show ? <content to show when state is true /> : null}
)Stack Overflow用户
发布于 2020-10-22 17:35:56
下面是一种更大规模的方法来实现这一点。将来，如果您想要添加不同类型的新主题，例如Python(可以是AI类型)，您需要添加其他条件检查，您只需添加AI切换按钮，并将onClick设置为toggleListType('AI')。
import React, { useState ,useEffect} from 'react';
import './Home.css'
const Home = () => {
const [listOFtopics,setlistOFtopics]=useState([
{type:'FRONTEND',title:'react'},
{type:'FRONTEND',title:'angular'},
{type:'MIDDLEWEAR',title:'node'},
{type:'MIDDLEWEAR',title:'express'},
])
const [listOFtopicsToDisplay,setlistOFtopicsToDisplay]=useState([])
useEffect(()=>{
//initializing listOFtopicsToDisplay to show FRONEND related topics
setlistOFtopicsToDisplay(listOFtopics.filter(t=> t.type =="FRONTEND"))
},[])
const toggleListType=(type)=>{
setlistOFtopicsToDisplay(listOFtopics.filter(t=> t.type ==type))
}
return (
<div className='container'>
<div className='row'>
<div className='col-6'>
<button onClick={e=>toggleListType('FRONTEND')} className='btn btn-primary mt-3'>Frontend</button>
</div>
<div className='col-6'>
<button onClick={e=>toggleListType('MIDDLEWEAR')} className='btn btn-danger mt-3'>Middleware</button>
</div>
</div>
<div className='row mt-3'>
{
listOFtopicsToDisplay.map(t=><div className='col-3'><h3>Vue</h3</div>)
}
</div>
</div>
)
}
export default Home页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64487370
复制相关文章
相似问题
腾讯云开发者
