Geben Sie einfach einen Wert von einer anderen Komponente

Question

Fragen Sie sich, ob Sie helfen können. Ich versuche, eine generische Komponente zu erstellen, die, wenn sie aufgerufen wird, einen Wert zurückgibt.

Der Code steht zur Zeit wie folgt:

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 

und in einer anderen Komponente, versuche ich den Aufruf der Funktion client (auch einen Import durchgeführt).

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

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

Ich soll einen Rückgabewert von ‚Managern‘ erwarten würde, aber ich

TypeError: WEBPACK_IMPORTED_MODULE_9__helpers_clients.a.clientName is not a function

Answer 1

Sie deklarieren die Funktion clientName innen die render Methode der Clients. Auf diese Funktion kann nur innerhalb des Bereichs zugegriffen werden, die render Methode. Für den Zugriff auf die Funktion wie würden Sie, indem Sie die Klasse Clients statische Methode aufrufen clientName, können Sie es wie folgt schreiben sollte:

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 

Wenn Sie irgendetwas mit dieser Klasse zu machen, haben nicht die Absicht, die Sie nicht reagieren müssen, und kann einfach eine Dienstprogramm/statische Klasse wie folgt erstellen:

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; 
    } 
} 

Answer 2

die Funktion client nicht eine Eigenschaft der Klasse, sondern eine lokale Funktion innerhalb der Funktion machen und daher nicht zugänglich von außen.

Um dies zu lösen, müssen Sie client sowie Ihre userEnum Eigenschaften der Clients Objekt, zum Beispiel im Konstruktor machen:

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