javascript - 如何在 React JS 中访问另一个文件(和函数)的状态?
问题描述
我正在为我的问题寻找解决方案。我正在使用一个名为 unstated ( https://github.com/GitbookIO/unstated ) 的库。它为 reactjs 应用程序创建了一个全局状态。问题是:我不能在我的函数 Y 中使用在函数 X 上创建的状态。在这种情况下,我在 App.js 中创建了我的状态,并想在我的 DivCheckBox.js 中访问它。
应用程序.js:
import './App.css';
import DivCheckBox from './components/DivCheckBox/DivCheckBox';
import { Container, useUnstated } from '@gitbook/unstated';
class DadosUnstated extends Container<{
nodesPadrao: Object,
edgesPadrao: Object,
}> {
state = {
nodesPadrao: [
{
status: 0,
id:1,
label: 'MAT001',
title: 'CALCULO DIFERENCIAL E INTEGRAL I',
details: "Integrais- impróprias: seqüências séries numéricas. Funções de R em R. Derivadas. Integrais. Aplicações. \"Regras de L'Hospital\".",
level: 1,
weight: 90,
groupId: 1,
subGroupId: 1,
slots: [1, 2],
},
{
status: 0,
id:50,
label: 'EEE019',
title: 'TRABALHO DE CONCLUSAO DE CURSO II',
details: 'Finalização do projeto elaborado, no projeto final de curso I e apresentação de monografia. Defesa do trabalho perante banca examinadora.',
level: 11,
weight: 90,
groupId: 5,
subGroupId: 4,
slots: [1, 2],
},
{
status: 0,
id:51,
label: 'EEE020',
title: 'ESTAGIO SUPERVISIONADO EM ENGENHARIA DE SISTEMAS',
details: 'Atividades de treinamento, supervisionadas por um docente do curso, na área de atuação profissional do engenheiro de sistemas.',
level: 12,
weight: 165,
groupId: 5,
subGroupId: 4,
slots: [1, 2],
},
],
edgesPadrao:[
{
id: 1,
from: 1,
to: 7,
label: 'MAT001 -> MAT039',
},
{
id: 29,
from: 32,
to: 41,
label: 'ELEXXE -> ELEXXF',
},
{
id: 30,
from: 44,
to: 42,
label: 'ELE090 -> ELEXXG',
},
{
id: 31,
from: 40,
to: 41,
label: 'ELEXXF -> ELE088',
},
{
id: 32,
from: 30,
to: 42,
label: 'ELT080 -> ELEXXG',
},
{
id: 33,
from: 35,
to: 40,
label: 'ELE077 -> ELE088',
},
{
id: 55,
from: 11,
to: 33,
label: 'ELEXXI -> ELEXXJ',
},
{
id: 56,
from: 47,
to: 48,
label: 'ELEXXK -> ELE087',
},
],
};
increment(id) {
let aux=this.state.nodesPadrao;
aux[id-1].status=!aux[id-1].status;
this.setState({ nodesPadrao: aux });
console.log(this.state.nodesPadrao);
}
decrement(id) {
let aux=this.state.nodesPadrao;
aux[id-1].status=!aux[id-1].status;
this.setState({ nodesPadrao: aux });
console.log(this.state.nodesPadrao);
}
}
函数应用程序(){
const dados = useUnstated(DadosUnstated);
return (
<div>
{dados.state.nodesPadrao.map(p => {
return (
<DivCheckBox nomeDisciplina = {p.title} labelDisciplina = {p.label} id = {p.id}/>
)})
}
<p>{dados.state.edgesPadrao[3].status} oiiiiii {dados.state.edgesPadrao[0].status}</p>
</div>
);
}
export default App;
DivCheckBox.js:
import React, { Component } from 'react';
import Func from './func'
import { Container, useUnstated } from '@gitbook/unstated';
import DadosUnstated from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js'
function DivCheckBox(props){
const dados = useUnstated(DadosUnstated);
dados.nodesPadrao[2].status=12;
return(
<div>
<p id = "pgh">{props.nomeDisciplina}</p>
<input id="MAT001" class = {props.labelDisciplina} type="checkbox" onClick={() => Func(props.labelDisciplina,props.id)}/>
</div>
);
}
export default DivCheckBox;
函数.js:
import { Container, useUnstated } from '@gitbook/unstated';
import DadosUnstated from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js'
function Func(classe,id){
const dados = useUnstated(DadosUnstated);
var chb = document.getElementsByClassName(classe);
if(chb[0].checked){
console.log("marquei o "+classe);
}else if(!chb[0].checked){
console.log("desmarquei o "+classe);
}
}
export default Func;
解决方案
问题
我认为您已经混淆了要从中导出App.js
和导入以用于DivCheckBox
.
在App.js
:
export default App;
在DivCheckBox.js
:
import DadosUnstated from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js';
...
const dados = useUnstated(DadosUnstated);
这DadosUnstated
是从 导入的默认值App.js
,它是App
React 组件,而不是定义的DadosUnstated
容器。
解决方案
我认为您可能导出DadosUnstated
为名称导出
export DadosUnstated;
因此,您应该将其作为命名导入导入
import { DadosUnstated } from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js';
我相信它现在将引用您期望它引用的对象,即容器,并且钩子现在应该可以工作了。
const dados = useUnstated(DadosUnstated);
推荐阅读
- git - 提交到 Github 时如何忽略文件的某些部分?
- websocket - 在 clojure 中使用 sente packers.transit/get-transit-packer 时出现无效事件“~#chsk/handshake”
- python - 从父目录运行 Python 产生 ModuleNotFoundError: No module named 'config.gcloud_image'
- asp.net - C#:如何修复模型不匹配错误:ViewDataDictionary 实例需要类型的模型项?
- git - 我应该继续创建分支还是应该合并?
- javascript - 在nodejs中使用异步配置续集
- package - conda 骨架不生成 build.sh 和 bld.bat,只生成 meta.yaml
- c++ - 地图包装器获取值被覆盖
- google-apps-script - 达到止盈或止损后停止检查价格,谷歌表上的自定义功能与应用程序脚本
- c - 请有人告诉我为什么程序在进入循环的第一个元素后卡住了?