Я новичок в реагировании на крючки и немного экспериментирую.Я могу отобразить свои значения, которые генерируются в Provider.js в App.js через Comptest.js.Моя проблема в том, что структура моего проекта с css и т. Д. Делает неудобным иметь такую структуру в App.js, как это:
<Provider>
<Comptest />
</Provider>
можно ли получать данные без отображения компонентов таким образомв приложении?просто передавая его между компонентами.
Вот компактная версия моего приложения:
App.js
import React, { useContext } from "react";
import Provider from "./Provider";
import Comptest from "./Comptest";
import DataContext from "./Context";
function App() {
return (
<div className="App">
<h2>My array!</h2>
<Provider>
<Comptest />
</Provider>
</div>
);
}
export default App;
Provider.js
import React, { useState } from "react";
import DataContext from "./Context";
const Provider = props => {
const data = ["item1", "item2"];
return (
<DataContext.Provider value={data}>{props.children}</DataContext.Provider>
);
};
export default Provider;
Comptest.js
import React from "react";
import DataContext from "./Context";
const Comptest = () => {
const content = React.useContext(DataContext);
console.log(content);
return <div>{(content)}</div>;
};
export default Comptest;
Context.js
import React from "react";
const DataContext = React.createContext([]);
export default DataContext;