this.props.children 不渲染答案

【问题标题】：this.props.children dosent renderthis.props.children 不渲染
【发布时间】：2019-11-12 13:34:42
【问题描述】：

我是新来的反应，我试图理解上下文。所以我尝试为用户创建一个提供者和一个消费者。 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'));

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

函数作为 React 子级无效。如果您可能会发生这种情况返回一个组件而不是从渲染。或者也许你意味着调用这个函数而不是返回它。

什么是错误，有什么基本的我没有正确地做。

【问题讨论】：

标签： reactjs react-router-dom react-context

【解决方案1】：

我已经为您编写了 sn-ps 代码并在代码沙箱中运行它，这对我来说似乎没问题，没有看到你们其他人的文件很难说是什么问题。也许这与您如何导入和使用反应路由器有关。这是我的工作 sn-ps

// 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

【讨论】：