调用方法进入 class React ES6

Question

我有以下反应class

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

But I have the following error:

TypeError: _valClass2.default.getValue is not a function.

如果我这样编码

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

您必须使用 "this.constructor."

调用静态方法

所以会是

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

Answer 2

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

根据DOC：

Static method calls are made directly on the class and are not callable on instances of the class.

Static methods are not directly accessible using the this keyword from non-static methods. You need to call them using the class name: CLASSNAME.STATIC_METHOD_NAME() or by calling the method as a property of the constructor: this.constructor.STATIC_METHOD_NAME().

In order to call a static method within another static method of the same class, you can use the this keyword.

在你的情况下，我认为你不需要 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 并想调用它的函数，那么您需要将其定义为静态的。

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 3

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

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'/>

调用方法进入 class React ES6

Call a method into the class React ES6

reactjs

es6-class