调用类中的一个方法-- React ES6

Question

我有以下的反应类

export default class ValClass { 
    getValue (key) {
       return key;
    }
}

import React from 'react'
import ValClass from 'valclass'

export class Content extends React.Component {       

    render() {
        let value = ValClass.getValue(this.props.valueKey);
        return <span dangerouslySetInnerHTML={{__html: value}} />
    }
}

但我有以下错误： TypeError：_valClass2.default.getValue不是一个函数。

如果我像这样编码

export default class ValClass { }
ValClass.getValue (key) {
   return key;
}

import React from 'react'
import ValClass from 'valclass'

export class Content extends React.Component {       

    render() {
        let value = ValClass.getValue(this.props.valueKey);
        return <span dangerouslySetInnerHTML={{__html: value}} />
    }
}

那它就正常工作了。多么?

Answer 1

原因是，您将函数定义为静态，直接使用这关键字将无法访问。

根据文档

静态方法调用直接在类上进行，不能在类的实例上调用。 静态方法不能使用来自非静态方法的这关键字直接访问.您需要使用类名: CLASSNAME.STATIC_METHOD_NAME()或调用方法作为构造函数: this.constructor.STATIC_METHOD_NAME()的属性来调用它们。 为了在同一类的另一个静态方法中调用静态方法，可以使用这关键字。

在这种情况下，我认为您不需要static方法，而不是将其定义为static，编写如下所示：

​

class Content extends React.Component {

   getValue() {
      return "<div> Hello </div>";
   }

   render() {
      let value = this.getValue();
      return <div dangerouslySetInnerHTML={{__html: value}} />
   }
}

ReactDOM.render(<Content/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

​

更新：

您更改了最初的问题，如果您定义了另一个类并想调用其中的一个函数，那么您需要将其定义为静态的。

​

class Content extends React.Component {

   render() {
      let value = App.getValue();
      return <div dangerouslySetInnerHTML={{__html: value}} />
   }
}

class App {
   static getValue() {
      return "<div> Hello </div>";
   }
}

ReactDOM.render(<Content/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

​

Answer 2

如果要在调用static时在静态上下文中使用getValue，请添加ValClass.getValue关键字。

​

class ValClass { 
    static getValue (key) {
        return key;
    }
}

class Content extends React.Component {
   render() {
       let value = ValClass.getValue(this.props.valueKey);
       return <span dangerouslySetInnerHTML={{__html: value}} />
   }
}

ReactDOM.render(<Content valueKey="<strong>Hello</strong>" />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

​

Answer 3

您必须用“this.constructor”调用静态方法。

所以这会是

this.constructor.getValue(this.props.valueKey);