导入的函数在 render() 下不起作用

Question

我试图将一堆可重用的函数移到一个方便的地方，但是我在其他文件中使用它们时遇到了问题。 我正在使用没有 Node.js 的静态 React.js 前端。

miscFunctions.js

export const capitalize = (string) => {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

module.exports = {
  capitalize,
  other functions...
}

测试.js

import React, { Component } from 'react';
import capitalize from './miscFunctions';

class Test extends Component {
  constructor(props) {
    super(props);
    this.capitalize = capitalize.bind(this);
  }
  render() {
    return (
      <div>
        {this.capitalize("foo")}
      </div>
    );
  }
}

export default Test;

capitalize() 只要在类函数中使用它就可以正常工作，但是一旦我尝试在 render() 中使用它，它就不存在了。 我收到消息“类型错误：无法读取未定义的属性‘绑定’”

Answer 1

您根本不需要将capitalize函数放在组件上。 您可以从构造函数中删除它，然后按原样使用它。

capitalize是一个命名的导出，所以你需要记住这一点。

// miscFunctions.js
export const capitalize = (string) => {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

// Test.js
import React, { Component } from 'react';
import { capitalize } from './miscFunctions';

class Test extends Component {
  render() {
    return (
      <div>
        {capitalize("foo")}
      </div>
    );
  }
}

export default Test;