时间戳

首页 > 解决方案 > 在 React 中创建 userInfo 容器

javascript - 在 React 中创建 userInfo 容器

问题描述

我正在设置一个新的可导出类，该类可以在反应中导出具有值的常量。

我states在导出类中启动，如何导出变量并检索值。

我想把它states变成常量，然后导出常量，这样我就可以通过在另一个 JS 文件中导入类来检索它。

我该怎么做，以及如何获得常量的值。

下面是我从中得到的概念

UserInfo.js

  `export default class UserInfo extends React.Component {
   state = {
     userName: null,
     userType: null,
     userEmail: null,
     userCourse: [],
     registeredCourse: []
   }
    this.setState({
     userName: 'a',
     userType: 'b',
     userEmail: 'c',
     userCourse: ['d','e','f'],
     registeredCourse: ['g','h']
    })
    render(){
       const userType = this.state.userType
       return(
         userType
     )
    }`

user.js

`import UserInfo from './UserInfo'

 class App extends React.Component{
    render(){
      return(
        <div>{UserInfo.userName}</div>
      )
    }
 }`

标签： javascriptreactjsfirebase

解决方案

有两种方法：

  1. 在 App 类之外声明状态，然后您可以将其导出。

    export const states= {
  userName: 'a',
  userType: 'b',
  userEmail: 'c',
  userCourse: ['a','b','c'],
  registeredCourse: ['a','b']
};


export default class UserInfo extends React.Component {
 enter code here
}

render(){
   console.log(`state is: ${ state}`);
}

    像这样在另一个类中导入它

    import { UserInfo, states, } from 'path/to/UserInfo';

console.log(`test is: ${ test }`);

  2. 或者您可以使用静态属性在另一个模块中访问它。

    class State extends React.Component {
      static states= {
         userName: 'a',
         userType: 'b',
         userEmail: 'c',
         userCourse: ['a','b','c'],
         registeredCourse: ['a','b']
      };
}

    然后使用它

    console.log(State.states);

推荐阅读