Reactjs 呈现React上下文使用者时出现多个子项错误

我只是尝试使用react provider，但不知怎的，我出现了以下错误： js:1437警告：上下文使用者呈现了多个子项，或者不是函数的子项。上下文使用者希望有一个子函数。如果确实传递了函数，请确保函数周围没有尾随或前导空格

这是context.js

import React, { Component } from 'react'
    const Context=React.createContext()
    class Providerr extends Component {
    state={display:false}
    displayeditor=()=>{this.setState({display:!this.state.display})  }
    render() { return (
      <Context.Provider value={{...this.state,displayeditor:this.displayeditor  }}>
          {this.props.children}
      </Context.Provider>
    )
  }
}
    const Consumer=Context.Consumer
export {Providerr,Consumer}

import React，{Component}来自“React”
const Context=React.createContext（）
类提供程序扩展组件{
状态={display:false}
displayeditor=（）=>{this.setState（{display:！this.state.display}}
render（）{return(
{this.props.children}
)
}
}
const Consumer=Context.Consumer
导出{provider，Consumer}

我想在下面吃

import React, { Component } from 'react'
import {NavLink} from "react-router-dom"
import "./leagues.scss"
import {Consumer} from "./context.js"
export default class Navbar extends Component {

  render() {
    return (
        <nav className="navbar navbar-expand-lg">
           <a className="navbar-brand" href="#Home">
             <img src="./images/customLogo.jpg" className="navlogo"/>
           </a>        
           <div className="collapse navbar-collapse">
             <ul className="navbar-nav mx-5"> 
             <NavLink to="/">
             <li className="nav-item active mr-5">
               <div className="nav-link">
                 <span>Home</span>
               </div>  
             </li>
             </NavLink>
             <Consumer> {value =>      
             <li onClick={value.displayeditor}  className="nav-item mr-5">
               <div className="nav-link modal_lig" href=""> 
                 <span>Leagues</span>    
               </div>  
             </li> }
            </Consumer>
         </nav>     
 )}}

import React，{Component}来自“React”
从“react router dom”导入{NavLink}
导入“/leagues.scss”
从“/context.js”导入{Consumer}
导出默认类导航栏扩展组件{
render（）{
返回(


家

{value=>

联盟
}
)}}

将整个代码包装在

消费者

中，如下所示。还要注意的是，有些html元素没有正确关闭

    import React, { Component } from 'react'
import {NavLink} from "react-router-dom"
import "./leagues.scss"
import {Consumer} from "./context.js"
export default class Navbar extends Component {

    render(){
        return(
            <Consumer> 
                {value => (
                    <nav className="navbar navbar-expand-lg">
                        <a className="navbar-brand" href="#Home">
                            <img src="./images/customLogo.jpg" className="navlogo"/>
                        </a>        
                        <div className="collapse navbar-collapse">
                            <ul className="navbar-nav mx-5"> 
                                <NavLink to="/">
                                    <li className="nav-item active mr-5">
                                        <div className="nav-link">
                                            <span>Home</span>
                                        </div>  
                                    </li>
                                </NavLink>
                                <li onClick={()=>value.displayeditor()}  className="nav-item mr-5">
                                    <div className="nav-link modal_lig" href=""> 
                                        <span>Leagues</span>    
                                    </div>  
                                </li>
                            </ul>
                        </div>
                    </nav> 
                )} 
            </Consumer>
        )
    }
}

import React，{Component}来自“React”
从“react router dom”导入{NavLink}
导入“/leagues.scss”
从“/context.js”导入{Consumer}
导出默认类导航栏扩展组件{
render（）{
返回(
{value=>(


家

value.displayeditor（）}className=“导航项目mr-5”>
联盟


)} 
)
}
}

看起来您在

上缺少了
不，它无法解决问题您是否尝试按照错误所述删除函数周围的空格<代码>{value=>

。此外，我不确定函数结束括号后的新行是否也会影响，请尝试删除它。非常感谢！这很有效，当我编写此代码“{value”时，奇怪的是并排给出错误，但在不同的行上没有错误，顺便说一句，我总是需要包装所有内容吗？编辑：我尝试过；不需要，问题是行膨胀，为了便于阅读，我建议您移动

{value

到

组件内的新行。对于第二个问题，是的，因为在您的情况下，根组件是

Providerr

，它只希望一个组件来自

{this.props.children}