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

【问题标题】：imported functions don't work under render()导入的函数在 render() 下不起作用
【发布时间】：2019-02-20 18:51:46
【问题描述】：

我试图将一堆可重用的函数移到一个方便的地方，但我在其他文件中使用它们时遇到了问题。我正在使用没有 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：无法读取未定义的属性‘绑定’”

【问题讨论】：

为什么要把capitalize函数放在组件上呢？从构造函数中删除它，然后写{capitalize("foo")}。它也是一个命名导出，所以你需要像import { capitalize } from './miscFunctions'; 一样导入它
我认为你应该像 import {capitalize} from './miscFunctions'; 一样导入。这可能是问题所在。
正如 Kubwimana 指出的那样，您的代码中有一个错误。请参阅我对各种imports 之间差异的回答：Import Statements in ES6 from MDN docs。
是的，我已经尝试了几种不同的方法来让这个函数按预期工作。当我将其更改为 {capitalize} 并删除绑定时，我收到编译时错误“尝试导入错误：'capitalize' 未从 './miscFunctions' 导出。”
@anthony 你不需要export const capitalize 和module.exports = { capitalize, ... }。尝试删除 module.exports 看看会发生什么。

标签： javascript reactjs

【解决方案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;

【讨论】：

这是我尝试正确导入函数的迭代之一。代码看起来像我预期的那样，但我收到一条错误消息，指出“'capitalize' 不是从 './miscFunctions' 导出的。”但据我所知，确实如此。
@anthony 真令人沮丧。 It should work fine。您是否尝试过完全删除module.exports = { ... };？你不需要export const capitalize 和module.exports = { capitalize, ... }