在一组子组件中实现useContext

问题描述

我尝试从下面开始在我的应用程序的各个区域中实现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

解决方法

解决了这个问题。

我修改了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