在一组子组件中实现 useContext
Posted
技术标签:
【中文标题】在一组子组件中实现 useContext【英文标题】:implement useContext in a set of child components 【发布时间】:2021-01-26 16:23:16 【问题描述】:我正在尝试在我的应用程序的各个区域中实现 useContext,从下面开始。
此摘录引用了 UI 的四个独立部分,但仍需要与 event
相关的信息。目前我正在钻探,想摆脱这个。鉴于所有示例,我很困惑我是否可以在摘录区域内声明上下文,或者它是否应该是一个单独的文件。还有其他问题,例如如何在映射循环中管理上下文。
在下面的情况下,我正在寻找某种filteredEntryContext
(或者为了减少混淆entryContext
)。
EntryIcon
、TypeIcon
、FavIcon
、NewIcon
和 GovIcon
需要使用此上下文。
Entries.js 节选
entries.filter(entry => entry.publishdate
.includes(date))
.map(filteredEntry =>(
<div className="entry" key=filteredEntry.id>
<div>
<span><EntryTitle url=filteredEntry.url title=filteredEntry.title domain=filteredEntry.domain/></span>
<span><TypeIcon type=filteredEntry.type/></span>
<span> </span>
<span><FavIcon favourite="false"/></span>
<span> </span>
<span><NewIcon addeddate=filteredEntry.addeddate/></span>
<span> </span>
<span><GovIcon domain=filteredEntry.domain/></span>
</div>
<div className="entrysubtext text-muted small">filteredEntry.description</div>
</div>
)
)
EntryTitle.js
import React from 'react';
import '../../App.css'
function EntryTitle (props)
return (
<>
<span className="entrytitle"><a href=props.url target="_blank" rel="noopener noreferrer">props.title</a></span>
<span className="text-muted small"> props.domain</span>
</>
)
export default EntryTitle
GovIcon.js
import React from 'react'
import '../../App.css'
function IconSwitch(props)
let domain = props.domain
let isGov = false
if (domain.includes('.gov'))
isGov = true
switch(isGov)
case true:
return(<span class="badge float-right badge-warning entryicon">G</span>)
default:
return null;
function GovIcon (props)
return (
<>
<IconSwitch domain=props.domain/>
</>
)
export default GovIcon
TypeIcon.js
import React from 'react';
import '../../App.css'
function IconSwitch(props)
switch(props.value)
case 'article':
return <span><i className="fa fa-file-text float-right entryicon" aria-hidden="true"></i></span>
//return 'fa fa-file-text';
case 'video':
return <span><i className="fa fa-video-camera float-right icon-red entryicon" aria-hidden="true"></i></span>
//return 'fa fa-video-camera';
case 'audio':
return <span><i className="fa fa-headphones float-right icon-orange entryicon" aria-hidden="true"></i></span>
case 'forum':
return <span><i className="fa fa-comments float-right icon-blue entryicon" aria-hidden="true"></i></span>
default:
return 'foo';
function TypeIcon (props)
return (
<>
<IconSwitch value=props.type />
</>
)
export default TypeIcon
【问题讨论】:
***.com/questions/41030361/… 这看起来就是你需要的。 【参考方案1】:解决了这个问题。
我修改了 Entries.js 文件,并在页面顶部使用了导出。声明一个新常量EntryContext
。
export const EntryContext = React.createContext()
更下方的映射部分现在将被调用的函数包装在一对 <EntryContext.Provider value=filteredEntry>
标记中。
<EntryContext.Provider value=filteredEntry>
<span className="div-left"><EntryTitle url=filteredEntry.url title=filteredEntry.title domain=filteredEntry.domain/></span>
<span><TypeIcon /></span>
<span> </span>
<span><FavIcon favourite="false"/></span>
<span> </span>
<span><NewIcon addeddate=filteredEntry.addeddate/></span>
<span> </span>
<span><GovIcon domain=filteredEntry.domain/></span>
</EntryContext.Provider>
其他文件现在从Entries.js
导入上下文
import EntryContext from '../Entries'
他们在return()
语句中的相关部分被<EntryContext.Consumer>
标签包围。
GovIcon 组件
import React from 'react'
import '../../App.css'
import EntryContext from '../Entries'
function IconSwitch(props)
let domain = props.domain
let isGov = false
if (domain.includes('.gov'))
isGov = true
switch(isGov)
case true:
return(<span class="badge float-right badge-warning entryicon">G</span>)
default:
return null;
function GovIcon ()
return (
<EntryContext.Consumer>
(values) =>
<IconSwitch domain=values.domain/>
</EntryContext.Consumer>
)
export default GovIcon
【讨论】:
以上是关于在一组子组件中实现 useContext的主要内容,如果未能解决你的问题,请参考以下文章
如何将每个带有一组子命令的 Click 命令拆分为多个文件?