时间戳

首页 > 解决方案 > React.js - 使用上下文 API 在组件之间传递函数 - 不起作用

reactjs - React.js - 使用上下文 API 在组件之间传递函数 - 不起作用

问题描述

我试图在两个组件之间传递一个函数，但即使我没有任何错误，我传递的函数也不会显示，或者准确地说它不起作用。我有两个文件，其中一个正在创建上下文，而另一个正在使用它（显然）。现在，它们没有显示在 App.js 中（在 index.js 中呈现，通常的东西）它们在单独的文件夹中。我正在使用 React Router 来显示一个页面（News.js）。

以下是文件：

新闻上下文.js

import React, { useContext, createContext, useState, useEffect } from "react";

export const newsK = React.createContext();

export const NewsContext = (props) => {

  const working = () => {
    console.log("it is working");
  };

  return <newsK.Provider value={working}>{props.children}</newsK.Provider>;
};

export default NewsContext;

新闻.js

import React, { useContext, useState, useEffect } from "react";
import { newsK } from "./NewsContext";
import { NewsContext } from "./NewsContext";


const News = () => {
  const data = useContext(newsK);
  return (
    <NewsContext>
      <div>
        <button onClick={data}></button>
      </div>
    </NewsContext>
  );
};

export default News;

当我按下按钮时，它不会做任何事情。有小费吗？

标签： reactjs

解决方案

您正在尝试在NewsContext组件之外使用上下文

解决方案是创建一个在内部调用 useContext 的组件NewsContext。

IE

const WrappedButton = () => {
  const data = useContext(newsK)

  return <button onClick={data} />
}

然后将其放入 NewsContext 中：

<NewsContext>
  <div>
    <WrappedButton />
  </div>
</NewsContext>

推荐阅读