Как я могу использовать функцию в разных файлах в React? - PullRequest
0 голосов
/ 06 декабря 2018

Я пытаюсь использовать функцию, которая отличается от 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;

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

В вашем коде есть 2 синтаксические ошибки.Оба находятся в файле компонента Tree.

  1. В вашей экспортированной функции (строка 6): const tree = document.getElemenetsByClassName(".tree-img")[0]; замените Elemenets на Elements.
  2. В классеметод shaking() (строка 21): const tree = document.getElemenetByClassName(".tree-img"); заменить Elemenet на Element
0 голосов
/ 06 декабря 2018

Сделайте свой компонент 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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...