Estoy tratando de registrar toda la clase de función en el componente de clase React, buscar en la web y preguntar en todas partes y obtuve esto
const listOfFunctionClass = Object.getOwnPropertyNames(MyClass.prototype) ¡Funciona! Pero el problema es que solo muestra el ciclo de vida y la función cuando intento iniciar sesión en console.log(listOfFunctionClass) , no incluya la función de flecha
Ejemplo
class Foo extends React.Component{ functionA(){} ==>will log functionB = () =>{} ===> will not show on log componentDidUpdate() ==> will log on log } Tendrá una matriz como [functionA, componentDidUpdate]
Entonces, ¿cómo puedo agregar la función de flecha en proptype?
Si bien técnicamente puede agregar una función de flecha en el prototipo asignándolo a la propiedad .prototype afuera:
class Foo extends React.Component { } Foo.prototype.fn = () => { // ... } Debido a cómo funcionan las funciones de flecha, no podrá acceder a this instancia que contiene. Tal función de flecha solo sería utilizable si se le pasaran todos los datos que necesita.
Pero usar un método estándar tendría más sentido en la mayoría de las situaciones.
class Foo extends React.Component { fn() { // ...o un campo de clase
class Foo extends React.Component { fn = () => {No puede detectar fácilmente qué campos de clase hay en una clase, porque son azúcar de sintaxis para
class Foo extends React.Component { constructor() { this.fn = () => {No están en el prototipo, solo están en las instancias. Tendrá que examinar la instancia en sí para ver qué propiedades tiene para encontrar dicho campo de clase.
const builtinReactInstanceProperties = ['props', 'context', 'refs', 'updater']; class Foo extends React.Component { fn = () => {} } const instance = new Foo(); console.log( Object.getOwnPropertyNames(instance) .filter(propName => !builtinReactInstanceProperties.includes(propName)) ); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>Dicho esto, este tipo de análisis dinámico de las propiedades que existen en un objeto es bastante extraño. No puedo pensar en cuándo ese enfoque sería el mejor.