React 上下文消费者呈现多个子错误

Question

我只是尝试使用 React 提供程序，但不知何故我收到此错误：index.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 } 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>     
 )}}

Answer 1

将整个代码包裹在里面Consumer，如下所示。另请注意，某些 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>
        )
    }
}