Javascript 使用上下文和钩子_Javascript_Reactjs

Javascript 使用上下文和钩子

javascript reactjs

Javascript 使用上下文和钩子,javascript,reactjs,Javascript,Reactjs,我正在努力学习如何正确使用上下文和挂钩。我让它工作时，一切都在课堂上，当我把它分成其他类的时候，上下文就找不到了。这就是我所尝试的” 我已将我的应用程序包装到提供商中 import React, {useContext} from 'react'; import Header from 'components/Header'; class App extends React.Component { constructor () { super(); this.stat

我正在努力学习如何正确使用上下文和挂钩。我让它工作时，一切都在课堂上，当我把它分成其他类的时候，上下文就找不到了。这就是我所尝试的”

我已将我的应用程序包装到提供商中

import React, {useContext} from 'react';
import Header from 'components/Header';

class App extends React.Component { 
  constructor () {
    super();
      this.state = {
        firstName:  "Bob",
        lastName:   "Joe",
    }
  }
  const {firstName,lastName} = this.state;
  return (
    <UserContext.Provider value = {{firstName,lastName}}>
      <Header/>
    </UserContext.Provider>
  )
}

import React，{useContext}来自“React”；
从“组件/标题”导入标题；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
名字：“鲍勃”，
姓：“乔”，
}
}
const{firstName，lastName}=this.state；
返回(
)
}

然后在Header中，我创建了一个Navbar函数来尝试使用它

const UserContext        =  React.createContext();

class Header extends React.Component { 
  render() {
    return ( 
      <div className="header">
        <NavBar/>
      </div>
    );
  }
}

function NavBar () {
  const {firstName,lastName} = useContext(UserContext);

  }
  return (
    <nav className="navbar">
      <span> Hello, {firstName} {lastName} </span>
    </nav>
  )
}

const UserContext=React.createContext（）；
类头扩展了React.Component{
render（）{
报税表（
);
}
}
函数导航栏（）{
const{firstName，lastName}=useContext（UserContext）；
}
返回(
你好，{firstName}{lastName}
)
}

我不确定出了什么问题

当我在同一页下使用它时，它是好的

我得到一个错误，即“firstname”未定义。我必须先将其作为状态传递吗？

您需要在创建

App.js

文件后从

UserContext

文件中导出该文件，或者创建一个新文件，例如导出该上下文的

UserContext.js

从那里，您需要从声明

NavBar

的文件中导入

UserContext

而且，您似乎在

App

组件中缺少

render（）

e、 g.）

UserContext.js

import {createContext} from 'react';

const UserContext =  createContext();

export default UserContext;

import React from 'react';
import Header from 'components/Header';

import UserContext from './UserContext';

class App extends React.Component { 
  constructor () {
    super();
      this.state = {
        firstName:  "Bob",
        lastName:   "Joe",
    }
  }

  render() {
    const {firstName,lastName} = this.state;
    return (
      <UserContext.Provider value = {{firstName,lastName}}>
        <Header/>
      </UserContext.Provider>
    )
  }
}

// other react imports omitted...
import UserContext from '../UserContext';

class Header extends React.Component { 
  render() {
    return ( 
      <div className="header">
        <NavBar/>
      </div>
    );
  }
}

function NavBar () {
  const {firstName,lastName} = useContext(UserContext);

  }
  return (
    <nav className="navbar">
      <span> Hello, {firstName} {lastName} </span>
    </nav>
  )
}

App.js

import {createContext} from 'react';

const UserContext =  createContext();

export default UserContext;

import React from 'react';
import Header from 'components/Header';

import UserContext from './UserContext';

class App extends React.Component { 
  constructor () {
    super();
      this.state = {
        firstName:  "Bob",
        lastName:   "Joe",
    }
  }

  render() {
    const {firstName,lastName} = this.state;
    return (
      <UserContext.Provider value = {{firstName,lastName}}>
        <Header/>
      </UserContext.Provider>
    )
  }
}

// other react imports omitted...
import UserContext from '../UserContext';

class Header extends React.Component { 
  render() {
    return ( 
      <div className="header">
        <NavBar/>
      </div>
    );
  }
}

function NavBar () {
  const {firstName,lastName} = useContext(UserContext);

  }
  return (
    <nav className="navbar">
      <span> Hello, {firstName} {lastName} </span>
    </nav>
  )
}

作为旁注，将整个

this.state

对象作为上下文的值传递，而不是像

{firstName，lastName}

那样进行分解，因为这样会导致每次传递新对象引用时子组件都重新呈现

所以推荐的方法是

class App extends React.Component { 
  // ... other codes omitted for brevity

  render() {
    return (
      <UserContext.Provider value = {this.state}>
        <Header/>
      </UserContext.Provider>
    )
  }
}

类应用程序扩展了React.Component{
//…为简洁起见，省略了其他代码
render（）{
返回(
)
}
}

您需要在

App.js

文件中创建

UserContext

后将其导出，或者创建一个新文件，例如，

UserContext.js

，用于导出上下文