javascript - 简单地从另一个组件返回一个值

Question

想知道你们是否可以提供帮助。我正在尝试创建一个通用组件，该组件在调用时会返回一个值。

目前的代码如下:

import React, {Component} from 'react'

class Clients extends Component {
   render () {
      var userEnum = {
      SMALL: 1,
      MEDIUM: 2,
      LARGE: 3,
      properties: {
        1: {name: "Admin", value: 1},
        2: {name: "Manager", value: 2},
        3: {name: "Standard", value: 3}
      }
    };

    const clientName = (value) => {
      return userEnum.properties[value].name
    }
    return null
  }
}

export default Clients

在另一个组件中，我尝试调用 clientName 函数(也进行了导入)。

import ClientHelper from '../../helpers/clients'

    ...
      const test =  ClientHelper.clientName(2)
      console.log(test)

我应该期待“Manager”的返回值，但我得到了

TypeError: WEBPACK_IMPORTED_MODULE_9__helpers_clients.a.clientName is not a function

Answer 1

您正在 class 的 render 方法中声明函数 clientName 客户端。此函数只能在其作用域内访问，即 render 方法。要通过调用类 Clients 静态方法 clientName 访问函数，您应该这样写:

import React, { Component } from 'react'

class Clients extends Component {
    static userEnum = {
        SMALL: 1,
        MEDIUM: 2,
        LARGE: 3,
        properties: {
            1: { name: "Admin", value: 1 },
            2: { name: "Manager", value: 2 },
            3: { name: "Standard", value: 3 }
        }
    };

    static clientName(value) {
        return Clients.userEnum.properties[value].name;
    }
    render() {

        return null;
    }
}

export default Clients

如果你不打算用这个类渲染任何东西，你不需要 react ，可以简单地创建一个实用程序/静态类，如下所示:

export default class Clients {
    static userEnum = {
        SMALL: 1,
        MEDIUM: 2,
        LARGE: 3,
        properties: {
            1: { name: "Admin", value: 1 },
            2: { name: "Manager", value: 2 },
            3: { name: "Standard", value: 3 }
        }
    };

    static clientName(value) {
        return Clients.userEnum.properties[value].name;
    }
}