Блог

Я набираю скорость с помощью реактивных перехватов и функций, и у меня есть три файла. Один предоставляет контекст 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, { createContext } from 'react'
export const SummaryContext = createContext(null);
  

Краткое изложение вики

 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>
  )

}
  

Изолированная среда отображает другую ошибку, как показано в sanbox

https://codesandbox.io/s/react-context-example-forked-rly0d?file=/src/components/Title.js

В SummaryContext.Consumer качестве дочернего компонента используется реквизит рендеринга, в частности функция, поэтому он ожидает, что его непосредственным дочерним элементом будет функция.

Это причина, по которой вы получили ошибку,

Ошибка типа: рендеринг не является функцией. (В ‘render (newValue)’, ‘render’ является экземпляром Object)

В вашем случае вы можете просто переместить 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>
  );
}
  

Также здесь value само по себе выдает сообщение, которое вы хотите отобразить, чтобы вы могли либо использовать <h2>{value}</h2> прямой путь, либо вы также могли использовать свой предыдущий способ присвоения его переменной message и вызову внутри шаблона.

https://codesandbox.io/s/react-context-example-forked-yrd7g?file=/src/components/Title.js

Я обновил react react-dom версию and до 16.13.0 и удалил SummaryContext.Consumer

если вам нужен пользовательский api или вы не можете обновить версию react, вам следует передать функцию в качестве дочерних элементов SummaryContext.Consumer

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

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