Javascript 在一组子组件中实现useContext

我正试图在我的应用程序的各个领域中实现useContext，从下面开始

此摘录引用了UI的四个独立部分，但它们仍然需要与

事件相关的信息。目前，我正在进行支柱钻井，并希望摆脱这种情况。考虑到所有的例子，我不知道我是否可以在摘录区域内声明上下文，或者它是否应该是一个单独的文件。还有其他问题，比如如何在映射循环中管理上下文

在下面的例子中，我正在寻找某种类型的
filteredEntryContext
（或者寻找更少的混淆
entryContext
）

此上下文需要由
EntryIcon
、
TypeIcon
、
FavIcon
、
NewIcon
和
GovIcon
使用

摘自Entries.js
{entries.filter（entry=>entry.publishdate
.包括（日期））
.map（filteredEntry=>(
{filteredEntry.description}
)
)
}

EntryTitle.js
从“React”导入React；
导入“../App.css”
功能入口标题（道具）{
返回(
{props.domain}
)
}
导出默认入口标题

GovIcon.js
从“React”导入React
导入“../App.css”
功能图标切换（道具）{
let domain=props.domain
设isGov=false
if（domain.includes（'.gov'））
isGov=true
交换机（isGov）{
大小写正确：
返回（G）
违约：
返回null；
}
}
功能图标（道具）{
返回(
)
}
导出默认政府图标

TypeIcon.js
从“React”导入React；
导入“../App.css”
功能图标切换（道具）{
开关（道具值）{
案例“文章”：
返回
//返回“fa文件文本”；
案例“视频”：
返回
//返回“fa-fa摄像机”；
“音频”案例：
返回
案例“论坛”：
返回
违约：
返回“foo”；
}
}
功能类型图标（道具）{
返回(
)
}
导出默认类型图标
修复了此问题

我修改了Entries.js文件，页面顶部有一个导出。声明新常量
EntryContext

export const EntryContext=React.createContext（）

下面的映射部分现在将调用的函数包装在一对标记中

    <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>

这看起来正是你需要的。
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

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

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

    <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>

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