渲染不是函数 updateContextConsumer答案

【问题标题】：Render is not a function updateContextConsumer渲染不是函数 updateContextConsumer
【发布时间】：2021-07-13 21:34:24
【问题描述】：

我有 3 个组件（CompA、CompB、CompC）我想将数据从 CompA 发送到 CompC，但它显示错误 Render is not a function updateContextConsumer。我正在使用功能组件

import React,{ createContext } from 'react';
import './App.css';
import CompA from './ContextApi/CompA';

const FirstName = createContext();

function App() {
  return (
    <>
      <FirstName.Provider value={"JD"}>
        <CompA/>
      </FirstName.Provider>
    </>
  );
}

export default App;
export {FirstName}; 


import React from 'react';
import CompB from './CompB';

const CompA = () =>{
    return(
        <CompB/>
    )
}

export default CompA;

import React from 'react';
import CompC from './CompC';

const CompB = () =>{
    return(
        <CompC/>
    )
}

export default CompB;

import React from 'react';
import {FirstName} from '../App';

const CompC = () =>{
    return(
        <>
            <FirstName.Consumer> {fname=>(<h1>{fname}</h1>) } </FirstName.Consumer>
        </>
    )
}

export default CompC;

错误图片在这里

enter image description here

【问题讨论】：

标签： javascript reactjs react-context react-functional-component context-api

【解决方案1】：

我认为问题在于<FirstName.Consumer> 结尾与{ 以及} 和</FirstName.Consumer> 之间的空格。以下内容不适用于留下的空格：

const FirstName = React.createContext();

const CompA = () =>{
    return (
        <CompB/>
    )
};

const CompB = () =>{
    return (
        <CompC/>
    )
};

const CompC = () => {
    return(
        <React.Fragment>
            <FirstName.Consumer>{ (fname) => (<h1>{fname}</h1>) }</FirstName.Consumer>
        </React.Fragment>
    )
};

function App() {
  return (
    <React.Fragment>
      <FirstName.Provider value={"JD"}>
        <CompA/>
      </FirstName.Provider>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

您也可以将{ (fname) => (<h1>{fname}</h1>) } 部分放在单独的行上，如下所示：https://reactjs.org/docs/context.html#contextconsumer

【讨论】：