Question

我是新来反应钩子的人，正在做一些试验。我可以通过Comptest.js显示在App.js的Provider.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;

使用react挂钩获取其他组件中的数据

0 个答案: