this.props.children 不呈现

Question

我是 React 的新手，我正在尝试理解上下文。所以我尝试为用户创建一个提供者和一个消费者。 Ftm 我只是想显示这个值，但我稍后会把它传递给路由器和其他组件。

这是提供商

const UserContext = React.createContext();

// Create an exportable consumer that can be injected into components
export const UserConsumer = UserContext.Consumer

// Create the provider using a traditional React.Component class
class UserProvider extends React.Component {

  render() {
    return (
      // value prop is where we define what values 
      // that are accessible to consumer components
      <UserContext.Provider value={{
        username: 'Crunchy Crunch',
        dateJoined: '9/1/18',
        membershipLevel: 'Silver'
      }}>
          {this.props.children}
      </UserContext.Provider>
    )
  }
}

这是应用程序：

class App extends React.Component {

  render() {

    return (

      <UserProvider>

        <Fragment>

          <Router>
            <Nav />

            <UserConsumer>
              {state => (

                <p>Username: {state.username}</p>
              )}
            </UserConsumer>

            <Switch>
              <ProtectedRoute exact path="/profile" component={Profile} />
              <Route exact path="/" component={Index} />
            </Switch>
          </Router>

        </Fragment>

      </UserProvider>

    );
  }
}

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

我在终端中没有收到任何错误，但我在浏览器中收到此消息：

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

错误是什么？有什么基本的我没有做对吗？

Br

Answer 1

我已经把你的代码片段和运行它放在 codesandbox 中了，我觉得没问题，没有看到你们其他人的文件很难说出问题是什么。也许这与您导入和使用 React 路由器的方式有关。这是我的工作片段

// App
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import { Switch, Route } from "react-router";

import Page1 from "./Page1";
import Nav from "./Nav";
import UserProvider, { UserConsumer } from "./Provider";
import "./styles.css";

function App() {
  return (
    <UserProvider>
      <Router>
        <Nav />

        <UserConsumer>
          {state => <p>Username: {state.username}</p>}
        </UserConsumer>

        <Switch>
          <Route exact path="/" component={Page1} />
        </Switch>
      </Router>
    </UserProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


// Provider
import React from "react";
const UserContext = React.createContext();

// Create an exportable consumer that can be injected into components
export const UserConsumer = UserContext.Consumer;

// Create the provider using a traditional React.Component class
export default class UserProvider extends React.Component {
  render() {
    return (
      // value prop is where we define what values
      // that are accessible to consumer components
      <UserContext.Provider
        value={{
          username: "Crunchy Crunch",
          dateJoined: "9/1/18",
          membershipLevel: "Silver"
        }}
      >
        {this.props.children}
      </UserContext.Provider>
    );
  }
}

这是一个 link 的工作代码和框

https://codesandbox.io/s/sweet-smoke-y3t9j

this.props.children 不呈现

this.props.children dosent render

reactjs

react-router-dom

react-context