如何将模块导入jsx？

Question

使用 jsx/react 并尝试从另一个文件导入函数。这是我的 jsx:

import React from 'react';
import {sayHello} from './stuff'

export class Arrow extends React.Component {

  cb = () => { // the class property is initialized with an arrow function that binds this to the class
console.log('testing=cb clicked')
  }

  render() {
    console.log('testing=sayHello()',sayHello() )
    return (
      <button onClick={ this.cb }>Click</button>
    );
  }
}

正在尝试导入如下所示的 sayHello：

const sayHello = () => 'say hello'

export default sayHello

当我运行 jsx 我得到这个错误：

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in

Answer 1

首先，import {sayHello} from ...应该是import sayHello from ...。其次，仅仅因为你犯了第一个错误，确保你使用 import {Arrow} from ... 而不是 import Arrow from ... 导入你的 Arrow 组件，因为前者有效而后者为我产生了几个错误，包括你提到的那个。

如何将模块导入jsx？

How to import module into jsx?

javascript

module

jsx

reactjs