Почему скрипты в React выполняются сразу?

Question

[nastyskafomka]

Здравствуйте, делаю приложение vk app и у меня возникла проблема:
Имеется следующий код в Home.js:

import React from 'react';
import $ from "jquery";
import {Panel, ListItem, Button, Group, Div, Avatar, PanelHeader} from '@vkontakte/vkui';
import "./sa.css";
import connect from '@vkontakte/vkui-connect';
import {rules,tt,mess} from "../what";

    // connect.send("VKWebAppInit", {});
    connect.send("VKWebAppGetAuthToken", {"app_id": 6962654, "scope": "friends"});

const Home = ({id, go, fetchedUser, ff}) => (
    <Panel id={id}>
        <PanelHeader>Главная</PanelHeader>
        {fetchedUser &&
        <Group title={`Здравствуйте, ${fetchedUser.first_name}`}>
            <ListItem
                before={fetchedUser.photo_200 ? <Avatar src={fetchedUser.photo_200}/> : null}
                description={fetchedUser.city && fetchedUser.city.title ? fetchedUser.city.title : ''}
            >
                {`${fetchedUser.first_name} ${fetchedUser.last_name}`}
            </ListItem>
        </Group>}
        <Group>
            <ListItem>
                <div className="message">
                    <p>text</p>
                </div>
            </ListItem>
        </Group>
        <Group>
            <ListItem>
                s
            </ListItem>
            <ListItem id="skdsmdksd">
                <p id="skdsmdksd">sd</p>
            </ListItem>
        </Group>

        <Group title="Быстрая навигация">
            <Div>
                <Button className="def_btn" size="xl" level="2" onClick={go} data-to="persik">
                    Связаться с менеджером
                </Button>

                <Button className="def_btn" size="xl" level="2" onClick={go} data-to="test">
                    Выбрать паблики
                </Button>
                <Button className="def_btn" size="xl" level="2" onClick={tt("dsdd")}>
                    Тестовое сообщение
                </Button>
                <Button className="def_btn" size="xl" level="2" >
                    Тест
                </Button>
            </Div>
        </Group>
    </Panel>
);
// Home.propTypes = {
//     id: PropTypes.string.isRequired,
//     go: PropTypes.func.isRequired,
//     fetchedUser: PropTypes.shape({
//         photo_200: PropTypes.string,
//         first_name: PropTypes.string,
//         last_name: PropTypes.string,
//         city: PropTypes.shape({
//             title: PropTypes.string,
//         }),
//     }),
// };

export default Home;

В "what".js следующее:

import $ from "jquery";

export function rules(dd) {
    $("#skdsmdksd").html(dd);
}

export function tt(test) {
    if (test !== "" || !test) {
        $(".message").append(`<div class="success_message">
				<p>${test}</p>		
			</div>`);
    } else {
        $(".message").append(`<div class="success_message">
				<p>Отослано!</p>		
			</div>`);
    }
}

export function mess(dat) {
    $("#skdsmdksd").html(dat.access_token);
}

Код App.js

import React from 'react';
import connect from '@vkontakte/vkui-connect';
import { View } from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';
import Home from './panels/Home';
import Persik from './panels/Persik';
import Test from './panels/test';


class App extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			activePanel: 'home',
			fetchedUser: null,
			ff:null
		};
	}

	componentDidMount() {
		connect.subscribe((e) => {
			console.log(e.detail.type);
			switch (e.detail.type) {
				case 'VKWebAppGetUserInfoResult':
					this.setState({ fetchedUser: e.detail.data });
					break;
				case 'VKWebAppAccessTokenReceived':
					this.setState({ff:e.detail.data});
					console.log(e);
					break;
				default:
					console.log(e.detail.type);
			}
		});
		connect.send('VKWebAppGetUserInfo', {});
	}

	go = (e) => {
		this.setState({ activePanel: e.currentTarget.dataset.to })
	};

	render() {
		return (
			<View activePanel={this.state.activePanel}>
				<Home id="home" ff={this.state.ff} fetchedUser={this.state.fetchedUser} go={this.go} />
				<Persik  id="persik" ff={this.state.ff}  go={this.go} />
				<Test  id="test" ff={this.state.ff}  go={this.go}/>
			</View>
		);
	}
}

export default App;

Проблема заключается в следующем:

При загрузке приложения, скрипты из "what" выполняются сразу, чего быть не должно.
Т.е получается, когда происходит рендер элементов, все скрипты выполняются (ну по крайней мере мне так кажется)

Можно ли это как-нибудь предотвратить?
Заранее спасибо за ответ.

Answer 1

[Антон Спирин]

При загрузке приложения, скрипты из "what" выполняются сразу, чего быть не должно.

Вы сами вызываете tt во время отрисовки компонента Home:

<Button className="def_btn" size="xl" level="2" onClick={tt("dsdd")}>

правильно так:

<Button className="def_btn" size="xl" level="2" onClick={() => tt("dsdd")}>

еще лучше написать хандлер обертку и передавать в кнопку его:

handler = () => {
  tt("dsdd");
};

<Button className="def_btn" size="xl" level="2" onClick={this.handler}>

По-хорошему, вообще не использовать jQuery в React разработке.

Comments

[nastyskafomka]

Мне подошел этот вариант, спасибо большое!

правильно так:

<Button className="def_btn" size="xl" level="2" onClick={() => tt("dsdd")}>

[Антон Спирин]

nastyskafomka, я вам настоятельно рекомендую убрать все модули использующие jQuery и научиться выполнять подобные задачи средствами React.

[nastyskafomka]

Антон Спирин, В данном случае, я просто хочу попробовать что-то сделать. В дальнейшем от jQuery естественно будет убран.

Еще раз спасибо.