如何在 React 的不同文件中使用函数？答案

【问题标题】：How can i use a function in different files in React?如何在 React 的不同文件中使用函数？
【发布时间】：2019-05-08 00:12:29
【问题描述】：

我正在尝试使用与App.js 不同的组件中的函数。我有语法错误，我不知道我做错了什么。我在App.js 中有一个按钮，当我点击它时，我之前提到的另一个组件中的那个功能应该会触发。

app.js：

import React from 'react';
import {shaking} from './components/Tree/Tree.js';

class App extends React.Component {
    constructor() {
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        shaking();
        console.log("done !");
    }

    render() {
        return (
            <div>
                <Tree className='tree' />
                <Apples />
                <Basket />
                <br/>
                <button className="start-btn" onClick={this.handleClick}>Start !</button>
                <br/>
            </div>
        );
    }
};

export default App;

这是我的另一个组件：

import React from 'react';
import TreeSvg from './Tree-svg/TreeSvg.js';
import './Tree.sass';

export  function shaking(){
    const tree = document.getElemenetsByClassName(".tree-img")[0];
    tree.classList.add("apply-shake");
    console.log('shaked!');
}

class Tree extends React.Component{
    constructor() {
    super();
        this.shaking = this.shaking.bind(this);
    }

    shaking() {
        this.setState({shaked:'1'});
        const tree = document.getElemenetByClassName(".tree-img");
        tree.classList.add("apply-shake");
        console.log('shaked!');
    }

    render(){
        return(
            <div className="tree-img">
            <TreeSvg />
            </div>
        );
    }
};

export default Tree;

【问题讨论】：

你能在这里分享完整的错误吗？同样在构造函数中，你不能这样设置状态。
("TypeError: Cannot call a class as a function") 这是我点击按钮后看到的
发生这种情况是因为您的默认导出是类。尝试将函数导出为默认值。
你的意思是我没有默认导出树组件？
是的，尝试将您的函数导出为默认值，因为每当我们导入组件时，都会调用导出默认值。

标签： javascript reactjs components jsx

【解决方案1】：

像这样制作你的 Tree 组件

import React from 'react';
import TreeSvg from './Tree-svg/TreeSvg.js';
import './Tree.sass';

export  function shaking(){
    const tree = document.getElementsByClassName(".tree-img")[0];
    tree.classList.add("apply-shake");
    console.log('shaked!');
}



class Tree extends React.Component{
    constructor() {
    super();
    this.state = {
        shaked : ''
    }
shaking() {
    this.setState({shaked:'1'});
    const tree = document.getElementByClassName(".tree-img");
    tree.classList.add("apply-shake");
    console.log('shaked!');
    }
render(){
return(
    <div className="tree-img">
    <TreeSvg />
    </div>
 );
}
};


export default Tree;

【讨论】：

我可以像这样定位组件吗 => const tree = document.getElementByClassName(".tree-img");

【解决方案2】：

您的代码中确实存在 2 个语法错误。两者都位于Tree 组件文件中。

在您导出的函数处（第 6 行）： const tree = document.getElemenetsByClassName(".tree-img")[0]; 将Elemenets 替换为Elements。
在类方法shaking()（第21行）： const tree = document.getElemenetByClassName(".tree-img"); 将 Elemenet 替换为 Element

【讨论】：