React.js / CRA，如何从另一个文件调用或导入javaScript函数？

Question

我的代码越来越长，所以我决定将它们转移到其他javaScript文件中。

我遵循了与我的问题有关的主题，但是为什么我只复制并粘贴所有内容却出错？

在上面的链接中，这是代码

//slideshow.js
function plusSlides(n) {
    showSlides(slideIndex += n);
}

//Home.js
class NextButton extends React.Component {
    constructor() {
        super();
        this.onClick = this.handleClick.bind(this);
    }

    handleClick (event) {
        script.plusSlides(1); // I don't know how to do this properly...
    }

    render() {
        return (
            <a className="next" onClick={this.onClick}>
                &#10095;
            </a>
        );
    } 
}

这是我的错误“尝试导入错误：未从'../plusSides文件'导出'plusSlides'。”

我用了react.js CRA，我需要配置一些东西来解决这个问题吗？

Answer 1

它一定有用。 您唯一需要的就是babel来转译es6（我假设您已经使用过react CRA来拥有它）。 还有另一种方法，即使用默认导出

slideshow.js

export default (n)=>{
    showSlides(slideIndex += n);
}

并像这样在Home.js中导入此函数

Home.js

import anyname from './slideshow.js' //I am assuming you have slideshow.js and Home.js in same directory

handleClick (event) {
    anyname(1); 
}

Answer 2

您真的给空格加上“文件”一词吗？？ 您不认为它应该像这样导入：

从'../plusSides'导入plusSlides;

另外，请查看您要从该文件导出的内容。 如果是默认导入，则可以按您想要的任何名称导入，否则必须在导出和导入中使用相同的名称。 请记住，每个文件只能进行一次默认导出。