Question

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

miscFunctions.js

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

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

Test.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（）中使用它，就不存在了。我收到消息“ TypeError：无法读取未定义的属性'bind'”

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;

导入的函数在render（）下不起作用

1 个答案: