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

我正在尝试使用一个函数，它位于与

App.js

不同的组件中。 我有语法错误，我不知道我做错了什么。我在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;

从“React”导入React；
从“./components/Tree/Tree.js”导入{shacking}；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
摇动（）；
console.log（“完成！”）；
}
render（）{
返回(


开始


);
}
};
导出默认应用程序；

这是我的另一个组件：

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;

从“React”导入React；
从“/Tree svg/TreeSvg.js”导入TreeSvg；
导入“/Tree.sass”；
导出函数（）{
const tree=document.getElemenetsByClassName（“.tree img”）[0]；
tree.classList.add（“apply shake”）；
console.log（'shaked！'）；
}
类树扩展了React.Component{
构造函数（）{
超级（）；
this.shaking=this.shaking.bind（这个）；
}
摇动{
this.setState（{shaked:'1'}）；
const tree=document.getElemenetByClassName（“.tree img”）；
tree.classList.add（“apply shake”）；
console.log（'shaked！'）；
}
render（）{
返回(
);
}
};
导出默认树；
使您的树组件如下所示

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;

从“React”导入React；
从“/Tree svg/TreeSvg.js”导入TreeSvg；
导入“/Tree.sass”；
导出函数（）{
const tree=document.getElementsByClassName（“.tree img”）[0]；
tree.classList.add（“apply shake”）；
console.log（'shaked！'）；
}
类树扩展了React.Component{
构造函数（）{
超级（）；
此.state={
抖动：“”
}
摇动{
this.setState（{shaked:'1'}）；
常量树=document.getElementByClassName（“.tree img”）；
tree.classList.add（“apply shake”）；
console.log（'shaked！'）；
}
render（）{
返回(
);
}
};
导出默认树；
您的代码中确实存在两个语法错误。这两个错误都位于
树中的组件文件中

在导出的函数中（第6行）：
const tree=document.getElemenetsByClassName（“.tree img”）[0]；
将
元素
替换为
元素
在类方法
shacking（）
（第21行）中：
const tree=document.getElemenetByClassName（“.tree img”）；
用
元素替换
Elemenet

你能在这里分享完整的错误吗。同样在构造函数中，你不能设置那样的状态。（“TypeError:不能将类作为函数调用”）这是我在单击按钮后看到的情况，这是因为您的默认导出是类。尝试将函数作为默认值导出。您的意思是我导出树组件而不使用默认值？是的，尝试将函数作为默认值导出，因为每当我们导入组件时，都会调用导出默认值。我可以像这样以组件为目标=>const tree吗=document.getElementByClassName（“.tree img”）；