this.props.children dosent рендер

Question

Я новичок, чтобы реагировать, и я пытаюсь понять контекст. Поэтому я попытался создать поставщика и потребителя для пользователя. Я просто пытаюсь показать значение, но собираюсь передать его в маршрутизатор и другие компоненты позже.

Это провайдер

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'));

Я не получаю никаких ошибок в терминале, но я получаю это сообщение в браузере:

Функции недопустимы как дочерние элементы React. Это может произойти, если вы вернуть компонент вместо рендера. Или, может быть, вы предназначен для вызова этой функции, а не для ее возврата.

В чем ошибка и есть ли что-то фундаментальное, что я делаю неправильно.

Br

Answer 1

Я взял ваши фрагменты кода и запустил его в codeandbox, и мне кажется, что все в порядке, не видя остальных файлов, трудно сказать, в чем проблема.Возможно, это связано с тем, как вы импортируете и используете реагирующий маршрутизатор.Вот мои рабочие фрагменты

// 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>
    );
  }
}

Вот ссылка на рабочие коды и поле

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