Одна функция на два компонента

@Чипс · Регистрация: 21.08.2015

Студворк — интернет-сервис помощи студентам

Добрый день.
Есть следующая конструкция:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { useEffect } from 'react';
import {Switch, Route, Link, Redirect} from 'react-router-dom';
import PageComponent_1 from '../page-component-1';
import PageComponent_2 from '../page-component-2';
 
const Application: React.FunctionComponent = () => {
  return (
    <div>
      
      <div>
        <hr />
        <nav>
          <ul>
            <li>
              <Link to="/PageComponent_1">PageComponent_1</Link>
            </li>
            <li>
              <Link to="/PageComponent_2">PageComponent_2</Link>
            </li>
          </ul>
        </nav>
        <hr />
        <Switch>
          <Route exact path={ "/PageComponent_1" } component={ PageComponent_1 } />
          <Route exact path={ "/PageComponent_2" } component={ PageComponent_2 } />
          <Redirect to="/"/>
        </Switch>
      </div>
    </div>
  );
};
 
export default Application;

компонент-страница №1

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React, {useState} from 'react';
 
type Props = {
 
}
 
type State = {
  field_1: string
};
 
const PageComponent_1: React.FunctionComponent<Props> = () => {
 
  const [state, changeState] = useState<State>(
    {
      field_1: '',
    },
  );
 
  const onClick = (e:any, feldName:string) =>{
    changeState((state) => ({
      ...state,
      [feldName]: 'TEST'
    }));
  }
  
  return (
    <div className="">
 
      PageComponent_1
 
      <div onClick={(e:any)=>onClick(e, 'field_1')}>
        ClickMe
      </div>
    </div>
  );
};
    
export default React.memo(PageComponent_1);

компонент-страница №2

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React, {useState} from 'react';
 
type Props = {
 
}
 
type State = {
  field_2: string
};
 
const PageComponent_2: React.FunctionComponent<Props> = () => {
 
  const [state, changeState] = useState<State>(
    {
      field_2: '',
    },
  );
 
  return (
    <div className="">
      PageComponent_2
    </div>
  );
};
    
export default React.memo(PageComponent_2);

Я хочу воспользоваться функцией "onClick " которая в компоненте-странице №1 в компоненте-странице №2
Как мне её туда передать или может её надо разместить где-то не в компоненте-странице №1 ?
Если какой-нибудь паттерн на подобные случаи?

@Ovederax · 20.01.2022, 18:28

слишком обрезанные примеры чтобы что-то сказать

сейчас в onClick в первом компоненте нет сложной общей логики, стоит просто скопировать логику во второй
если будет какая-либо сложная логика, то вынести ее в иерархии повыше, либо в обычную функцию-утилиту с параметрами

@Чипс · 20.01.2022, 23:22 **[ТС]**

Сообщение от Ovederax

то вынести ее в иерархии повыше, либо в обычную функцию-утилиту с параметрами

И как это сделать?

@Чипс · 21.01.2022, 10:22 **[ТС]**

Сообщение от Ovederax

в обычную функцию-утилиту

Что такое функция-утилита?

Добавлено через 1 минуту

Сообщение от Ovederax

просто скопировать логику во второй

Паттерны, обобщённые функции, кому всё это надо, копипаст форева!

@Splaisto · 21.01.2022, 15:05

Сообщение от Чипс

И как это сделать?

реакт позволяет создавать функциональные компоненты. создайте такой и импортируйте на страницы. если же обе страницы будут вызываться в каком-либо общем компоненте, можно вынести функцию в общий и передавать через пропс

@Ovederax · 21.01.2022, 15:19

Сообщение от Чипс

Паттерны, обобщённые функции, кому всё это надо, копипаст форева!

KISS
Пользоватся из одного компонента в другом функцией под названием "onClick" странно.
Не думаю что под есть патерн "Сделай что-то у соседа".

Сообщение от Чипс

И как это сделать?

Сообщение от Ovederax

слишком обрезанные примеры чтобы что-то сказать

Ну вот например обобщенная логика переносится в хук и используется в нескольких компонентах
Управление данными через redux, один компонент может изменить общие данные и это отразится на втором.
При этом друг из друга они функции не вызывают так как они на разных рутах и не существуют одновременно.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { Component } from 'react';
import { render } from 'react-dom';
import {
  Switch,
  Route,
  BrowserRouter,
  Router,
  Link,
  browserHistory,
  withRouter,
} from 'react-router-dom';
import { createBrowserHistory } from 'history';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { createStore } from 'redux';
 
const history = createBrowserHistory();
 
const useCounter = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  const increase = () => {
    dispatch({ type: 'plus' });
  };
  const decrease = () => {
    dispatch({ type: 'minus' });
  };
 
  return { count, increase, decrease };
};
 
const One = () => {
  const { count, increase } = useCounter();
 
  return (
    <div>
      <div>{count}</div>
      <button onClick={increase}>+</button>
      <button onClick={() => history.push('/two')}>two</button>
    </div>
  );
};
 
const Two = () => {
  const { count, decrease } = useCounter();
 
  return (
    <div>
      <div>{count}</div>
      <button onClick={decrease}>-</button>
      <button onClick={() => history.push('/one')}>one</button>
    </div>
  );
};
 
function reducer(state, action) {
  switch (action.type) {
    case 'plus':
      return { count: state.count + 1 };
    case 'minus':
      return { count: state.count - 1 };
 
    default:
      return { count: 0 };
  }
}
 
const store = createStore(reducer);
 
class App extends Component<AppProps, AppState> {
  render() {
    return (
      <Provider store={store}>
        <Router history={history}>
          <Switch>
            <Route path="/one" component={One} />
            <Route path="/two" component={Two} />
          </Switch>
        </Router>
      </Provider>
    );
  }
}
 
render(<App />, document.getElementById('root'));

Сообщение от Чипс

Что такое функция-утилита?

я имелл ввиду вынести обобщенную логику такую как запросы на сервер, валидация и прочее в отдельный файл утилит/хуков и импортировать оттуда.
Если onClick будет маленький, то смысл думать и изощрятся с вызовами, если можно откопировать.

Добавлено через 6 минут
Ну и касательно вопроса переиспользования функций.
В примере можете для обоих компонентов на одну кнопку повесить одну функцию increase из хука

Новые блоги и статьи Все статьи Все блоги /
влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .

@Ovederax 604 / 404 / 212 Регистрация: 30.04.2017 Сообщений: 744 Записей в блоге: 1
	20.01.2022, 18:28
	слишком обрезанные примеры чтобы что-то сказать сейчас в onClick в первом компоненте нет сложной общей логики, стоит просто скопировать логику во второй если будет какая-либо сложная логика, то вынести ее в иерархии повыше, либо в обычную функцию-утилиту с параметрами 0