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

原因是，您将功能定义为静态，直接使用this关键字将无法访问。

根据DOC：

静态方法调用直接在类上进行，并且不可调用   关于班级的实例。

使用this关键字无法直接访问静态方法   非静态方法。您需要使用类名称来调用它们：   CLASSNAME.STATIC_METHOD_NAME（）或将该方法作为属性调用   构造函数：this.constructor.STATIC_METHOD_NAME（）。

为了在另一个静态方法中调用静态方法   同一个班级，您可以使用this关键字。

在您的情况下，我认为您不需要static方法，而不是将其定义为static，请按以下方式编写：

＆＃13;

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

＆＃13;

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

＆＃13;

更新：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您想在调用getValue时在静态上下文中使用ValClass.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'/>

Answer 3

您必须使用“this.constructor”调用static-methods。

所以它会是

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

将方法调用到React ES6类中

3 个答案: