2 回答

TA貢獻1872條經(jīng)驗 獲得超4個贊
它SummaryContext.Consumer
使用渲染道具,特別是一個函數(shù)作為子組件,因此它期望它的直接子組件是一個函數(shù)。
這就是你得到錯誤的原因,
類型錯誤:渲染不是函數(shù)。(在'render(newValue)'中,'render'是Object的一個實例)
在您的情況下,您可以將 div 移動到函數(shù)內(nèi)部,例如,
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并在模板內(nèi)調(diào)用。

TA貢獻1836條經(jīng)驗 獲得超13個贊
我將react
和react-dom
版本更新為 16.13.0 并刪除了SummaryContext.Consumer
如果您需要消費者 api 或無法升級反應(yīng)版本,那么您應(yīng)該將一個函數(shù)作為子函數(shù)傳遞給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>
? );
}
添加回答
舉報