在一组子组件中实现 useContext

Posted

技术标签:

【中文标题】在一组子组件中实现 useContext【英文标题】:implement useContext in a set of child components 【发布时间】:2021-01-26 16:23:16 【问题描述】:

我正在尝试在我的应用程序的各个区域中实现 useContext,从下面开始。

此摘录引用了 UI 的四个独立部分,但仍需要与 event 相关的信息。目前我正在钻探,想摆脱这个。鉴于所有示例,我很困惑我是否可以在摘录区域内声明上下文,或者它是否应该是一个单独的文件。还有其他问题,例如如何在映射循环中管理上下文。

在下面的情况下,我正在寻找某种filteredEntryContext(或者为了减少混淆entryContext)。

EntryIconTypeIconFavIconNewIconGovIcon 需要使用此上下文。

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

更下方的映射部分现在将被调用的函数包装在一对 &lt;EntryContext.Provider value=filteredEntry&gt; 标记中。

    <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() 语句中的相关部分被&lt;EntryContext.Consumer&gt; 标签包围。

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的主要内容,如果未能解决你的问题,请参考以下文章

一组子图的标题

如何填充一组子`ref`ed文档猫鼬?

如何将每个带有一组子命令的 Click 命令拆分为多个文件?

“对象作为 React 子级无效。如果您要渲染一组子级,请改用数组。”错误

在 Python 中实现 Typescript 接口

APICloud教程