React报“函数不能作为React子元素”警告，类组件代码排查求助

兄弟，你这个警告的根源根本不是Navbar被当成函数，而是你在Navbar里使用AppContext.Provider的方式完全错了！

你看你Navbar的render里，直接把一个函数塞给了<AppContext.Provider>当子元素：

<AppContext.Provider>
  {(context) => (
    // ... 里面的Router和导航代码
  )}
</AppContext.Provider>

这完全不符合React上下文的用法——AppContext.Provider的子节点必须是React元素，而不是函数。你要消费上下文的话，得用**AppContext.Consumer**才对，Provider是用来提供上下文值的，不是用来消费的。而且你这里的Provider连value属性都没传，这也是个明显的问题。

更关键的是，你已经在App组件里用了<AppContext.Provider value={this.state}>，所以Navbar里根本不需要再套一层Provider，直接用Consumer消费上层的上下文就行！

正确的修改方案 #

把Navbar里错误的Provider用法换成AppContext.Consumer，修改后的完整Navbar代码如下：

import React from 'react';
import { BrowserRouter as Router, Switch, Link } from 'react-router-dom';
import './Navbar.css';
import AppContext from "../AppContext";

class UserLoggedInMenu extends React.Component {
  render() {
    return (
      <ul className="navbar-nav ml-auto">
        <li className="nav-item">
          <Link to="/my-account" className="nav-link"> My Account </Link>
        </li>
        <li className="nav-item">
          <Link to="/logout" className="nav-link"> Log Out </Link>
        </li>
      </ul>
    )
  }
};

class UserLoggedOutMenu extends React.Component {
  render() {
    return (
      <ul className="navbar-nav ml-auto">
        <li className="nav-item">
          <Link to="/my-account" className="nav-link"> Log In </Link>
        </li>
      </ul>
    )
  }
};

export default class Navbar extends React.Component {
  render() {
    return (
      <div id="Navbar">
        {/* 用Consumer消费上层App提供的上下文 */}
        <AppContext.Consumer>
          {(context) => (
            <Router>
              <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <div className="container">
                  <Link to="/" className="navbar-brand"> Library Management System </Link>
                  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                  </button>
                  <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav mr-auto">
                      <li className="nav-item">
                        <Link to="/new-books" className="nav-link"> New Books </Link>
                      </li>
                    </ul>
                    {context.userLoggedIn ? <UserLoggedInMenu /> : <UserLoggedOutMenu />}
                  </div>
                </div>
              </nav>
              <main className="container">
                <Switch>
                  {this.props.children}
                </Switch>
              </main>
            </Router>
          )}
        </AppContext.Consumer>
      </div>
    );
  }
}

为什么之前会报错？ #

React看到你给Provider传了一个函数当子元素，它会把这个函数当成React子节点尝试渲染，但React不允许直接渲染函数，所以就抛出了那个警告。改成用Consumer之后，Consumer专门支持接收函数作为子元素（这种模式叫「render props」），React就能正确识别并处理了。

改完之后，你App组件里的render代码完全不用动，原来的路由逻辑也能正常工作，那个烦人的警告就消失啦！

内容的提问来源于stack exchange，提问作者Blaine Lafreniere