如何解决从列表中选择时如何使用React Router显示单个元素的详细信息不使用API,而是使用硬编码的数据
现在,我已经映射了电影中的字符阵列,吐出了字符卡组件,这完全可以正常工作。我也有一个搜索框type = input,用于过滤显示的字符卡。但是我在使用反应路由器并将道具传递到单个“配置文件”组件时遇到了麻烦。这样,当您单击卡片时,它将呈现该单独的字符信息。单击时,字符名称显示在URL中。但是之后我很迷路。
大多数示例和教程都使用模板字符串和API提取,但这都是我正在使用的所有硬编码数据。任何帮助将不胜感激。我将通过分解道具和变量来重构。
这是我的app.js文件。 member_data是具有键值对的对象数组,例如名称:'steve',引用:'blah blah blah',而我使用name作为参数。
series.replace
这是显示从列表组件向下传递的道具的组件,其中
df['cat'] = df.remark.replace({'Category1': 'insufficient','Category2': 'insufficient','Category3': 'Duplicate'})
df['subcat'] = df.remark.replace({'Category1': 'resolution','Category2': 'information','Category3': 'ID repeated'})
print(df)
remark desc cat subcat
0 NA Present NA NA
1 NA Present NA NA
2 Category1 NA insufficient resolution
3 Category2 Present insufficient information
4 Category3 NA Duplicate ID repeated
function App() {
const [members] = useState(member_data)
const [search,setSearch] = useState('')
const [profile,setProfile] = useState({})
const handleInput = (e) => {
setSearch(e.target.value)
}
const getProfile = (name) => {
setProfile(member_data)
}
let filteredMembers = members.filter((member) => {
return member.name.toLowerCase().includes(search.toLocaleLowerCase())
})
return (
<Router>
<div className='tc'>
<Navbar />
<Switch>
<Route
exact
path='/'
render={(props) => (
<Fragment>
<Search handleInput={handleInput} />
<MemberList members={filteredMembers} />
</Fragment>
)}
/>
<Route
exact
path='/about'
render={(props) => (
<Fragment>
<About />
</Fragment>
)}
/>
<Route
path='/profile/:name'
render={(props) => (
<Profile
{...props}
profile={profile}
getProfile={getProfile}
members={member_data}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。