Javascript 反应错误：元素类型与命名导出无效

我用react钩子和函数加快了上城速度，我有三个文件。一个提供上下文

SummaryContext

，第二个是类组件，它使用上下文

WikiSummary

，第三个显示它

Title

然而，我得到了下面的错误，尽管我一直在胡闹（仍在学习），我不明白为什么我会得到这个错误

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `WikiSummary`.

摘要上下文 维基摘要

import React，{Component}来自“React”；
从“/components/Title”导入{Title}
从“./../contents/SummaryContext”导入{SummaryContext}
导入“../../App.css”
类WikiSummary扩展了组件{
render（）{
返回(
);
}
}
导出默认维基摘要；

标题

import React，{useContext}来自“React”
从“../../../contexts/SummaryContext”导入{SummaryContext}
导出函数标题（）{
const message=useContext（SummaryContext）
返回(
{message}
)
}

沙盒会显示一个不同的错误，如sanbox中所示

我将

react

和

react-dom

版本更新为16.13.0 并删除了

SummaryContext.Consumer

如果您需要consumer api或无法升级react版本，则应将函数作为子函数传递给

SummaryContext.consumer

从“React”导入React；
从“react”导入{useContext}；
从“/SummaryContext”导入{SummaryContext}；
导出函数标题（）{
返回(
{（值）=>(
{value}
)}
);
}

SummaryContext.Consumer使用渲染属性，特别是函数作为子组件，因此它希望其直接子组件是函数

这就是你出错的原因

TypeError:渲染不是函数。（在“render（newValue）”中，“render” 是对象的实例）

在您的例子中，只需将div移动到函数中，如下所示

import React from "react";
import { useContext } from "react";
import { SummaryContext } from "./SummaryContext";

export function Title() {
  const message = useContext(SummaryContext);

  return (
    <SummaryContext.Consumer>
      {(value) => (
        <div>
          <h2>{message}</h2>
        </div>
      )}
    </SummaryContext.Consumer>
  );
}

从“React”导入React；
从“react”导入{useContext}；
从“/SummaryContext”导入{SummaryContext}；
导出函数标题（）{
const message=useContext（SummaryContext）；
返回(
{（值）=>(
{message}
)}
);
}

此外，这里的

value

本身提供了您希望显示的消息，因此您可以直接使用

{value}

或者您也可以采用以前的方式将其分配给变量

消息和模板内的调用

第一个文件中的
摘要
定义在哪里。啊，我明白了。两秒钟。您能检查一下您是否为
摘要导入了正确的路径吗？Codewise看起来不错。我假设您有有效的
Summary
component尝试注释只是为了验证问题而不是Summary component是的，这样就消除了错误。但是现在我得到了
TypeError:render不是一个函数。（在“render（newValue）”中，“render”是对象的实例）
import React, {Component} from "react";
import {Title} from "./components/Title"
import {SummaryContext} from "../../contexts/SummaryContext"

import "../../App.css"

class WikiSummary extends Component {

render() {
  return (
    <>
      <SummaryContext.Provider value = "hello from context">
      <Title />
      </SummaryContext.Provider>
    </>

  );
}
}
export default WikiSummary;

import React, {useContext} from "react"
import {SummaryContext} from "../../../contexts/SummaryContext"

export function Title(){
  const message = useContext(SummaryContext)

  return(
    <div>
      <h2>{message}</h2>
    </div>
  )

}

import React from "react";
import { useContext } from "react";
import { SummaryContext } from "./SummaryContext";

export function Title() {
  const message = useContext(SummaryContext);

  return (
    <SummaryContext.Consumer>
      {(value) => (
        <div>
          <h2>{message}</h2>
        </div>
      )}
    </SummaryContext.Consumer>
  );
}