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)

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

TypeError： WEBPACK_IMPORTED_MODULE_9__helpers_clients .a.clientName 不是一个功能

Answer 1

您在class clientName的{{1}}方法中声明了render函数。此功能只能在其范围Clients方法中访问。要通过调用类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

Answer 2

函数clientName不是类的属性，而是render函数内的本地函数，因此无法从外部访问。

要解决此问题，您必须创建clientName以及Clients对象的userEnum属性，例如在构造函数中：

＆＃13;

import React, {Component} from 'react'

class Clients extends Component {
  constructor(props){
    super(props);
    this.userEnum = {
      SMALL: 1,
      MEDIUM: 2,
      LARGE: 3,
      properties: {
        1: {name: "Admin", value: 1},
        2: {name: "Manager", value: 2},
        3: {name: "Standard", value: 3}
      }
    };
  }
  
  function clientName (value) {
    return this.userEnum.properties[value].name
  }

  function render () {
    return null
  }
}

export default Clients

＆＃13;

只需从另一个组件返回一个值

2 个答案: