如何解决如何在Reactjsx文件中访问多个Context变量?
我的应用程序是一种仪表板,它具有多个“列表”面板,其内容取决于另一个面板中各种值的设置。我从其他人那里继承了这个项目,并且我对React很熟悉,但对React Context并不是特别熟悉。
因此,有一个片断上下文,如下所示(pieces-context.jsx):
import React,{ Component } from 'react'
import { objectOf,any } from 'prop-types'
const PiecesContext = React.createContext({
showUser: '',showItem: '',setUser: () => {},setItem: () => {}
})
export class PiecesProvider extends Component {
state = {
showUser: 'all',showItem: 'all'
setUser: (user) => {
this.setState({ showUser: user })
},setItem: (item) => {
this.setState({ showItem: item })
}
}
render() {
const { children } = this.props
const { showUser,setUser } = this.state
const { showItem,setItem } = this.state
return (
<PiecesContext.Provider value={{showUser,setUser,showItem,setItem}}>
{children}
</PiecesContext.Provider>
)
}
}
export const PiecesConsumer = PiecesContext.Consumer
“控制”面板允许用户更改“用户”和“项目”的值。有可用用户和项目的列表,用户可以单击一个以查看相应的项目。 “项目”控制器为(用户一台基本相同):
class PiecesSelector extends Component {
const itemList = [
{label: 'RN35',value: 'rn35'},// 'RN35' is the item code for this item
{label: 'SP24',value: 'sp24'},...
]
render() {
return (
<PiecesConsumer>
{({
showItem,setItem
}) => (
<>
<div key={uuid()} className="grid">
<SelectButton value={showItem} options={itemList} onChange={(e) => { setItem(e.value) }} />
</div>
</>
)}
</PiecesConsumer>
)
}
}
export default PiecesSelector
这使用了primereact的SelectButton
,它实际上显示了一个按钮列表,每个按钮用于itemList中的每个项目。最初选择showItem
的当前值(如果不为null),并且如果用户单击另一个按钮,则将相应的值传递到setItem
以更新上下文。
现在,我想显示当前选中的作品的列表(由用户和商品代码选择)。例如。用户可能希望查看站点上当前存在的所有作品,或者他们希望按用户(例如查看鲍勃的作品)或按商品代码(以查看所有RN35类型的作品)进行过滤,或同时按两种方式(以查看有多少个)鲍勃(Bob)有RN35)。
这全部由整个仪表板组件控制:
import React,{ Component } from 'react'
import PiecesSelector from '../piecesSelector'
import PiecesList from '../piecesList'
import { PiecesProvider } from '../pieces-context'
class DashboardComponent extends Component {
render() {
return (
<PiecesProvider>
<div className="p-grid p-fluid dashboard">
<PiecesSelector/>
<PiecesList/>
</div>
</PiecesProvider>
)
}
}
export default DashboardComponent
PiecesList
是需要了解当前选择选项(用户和项目)的众多组件之一。因此,我的问题是,如何访问PiecesList中的PiecesConsumer
?我也有一个LoginContext,所以我也必须检索它,因此不能只设置contextType。
到目前为止,我有:
import React,{ Component } from 'react'
import table from '../content/tableData.json'
class PiecesList extends Component {
constructor() {
super()
this.state = {
data: table,// Full data table (read in from file)
}
}
getCurrentData = () => {
const { data: { data } } = this.state // Read in all the data
let returnData = data
// SOMEHOW THIS NEEDS TO KNOW showUser AND showItem
if (showUser !== 'all') {
returnData = returnData.filter(row => row.assignedTo === showUser)
}
if (showItem !== 'all') {
returnData = returnData.filter(row => row.itemcode === showItem)
}
return returnData
}
render() {
return (
<PiecesConsumer>
{({ showUser,showItem }) => (
<LoginConsumer>
{({ user }) => (
<div className="dataList">
// Show the data
</div>
)}
</LoginConsumer>
)}
</PiecesConsumer>
)
}
}
export default PiecesList
我不知道如何在我有权访问showUser和showItem时调用getCurrentData。我可以将其称为渲染的第一步,但是那时我没有这些值。如果我在两个使用者中都调用它,则会在下一行()处出现错误。它说“意外令牌,预期为','”。如果我加逗号,它会显示“意外的','”。
我该如何解决?我不想太多改变整体结构,因为其他因素取决于它,所以我真的很想尽可能地将更改保持在PiecesList内。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。