this.props.children 不渲染

Posted 2023-04-14

【中文标题】this.props.children 不渲染

【英文标题】：this.props.children dosent render

【发布时间】：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 子级无效。如果您可能会发生这种情况 返回一个组件而不是从渲染。或者也许你 意味着调用这个函数而不是返回它。

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

Br

【参考方案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