如何將模塊導入到jsx中？

使用jsx/react並試圖從另一個文件中導入一個函數。這是我的JSX：如何將模塊導入到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

來源

2017-02-13 bier hier

首先， import {sayHello} from ...應該是import sayHello from ...。其次，僅僅因爲您犯了第一個錯誤，請確保您使用import {Arrow} from ...而不是import Arrow from ...導入您的Arrow組件，因爲前者的工作原理和後者對我產生了幾個錯誤，包括您提到的錯誤。

來源

2017-02-13 01:43:30

它工作，但爲什麼我必須使用箭頭{}而不是sayHello？ –

使用'export class Arrow ...'，您必須使用'import {Arrow} ...'，而使用'export default class Arrow ...'，您必須使用'import Arrow ...'。在前一種情況下，文件中可能會有多個'export ...'語句，因此您的導入語句必須能夠通過將該潛在變量列表放置在大括號中來處理導入多個變量。使用'export default ...'時，只能從該文件導出一個單獨的導出語句，因此導入語句可以自信地聲明它正在導入單個變量，即'import myVariable ...'。 –

很好的解釋謝謝 –

如何將模塊導入到jsx中？

回答

相關問題