呈现不是函数updateContextConsumer。

Question

我有3个组件( CompA，CompB，CompC)，我想将数据从CompA发送到CompC，但它显示错误呈现不是一个函数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;

错误的图像在这里

在这里输入图像描述

Answer 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