0

есть функциональный компонент

const MyComp = (props: any) => {
    // функция, которая будет вызываться
    const handleLoad = () => {
    }

    // отрисовать компонент
    return ();
}

и есть кнопка рядом с этим компонентом

<>
    <button onClick={handleStartLoad}>Load</button>
    <MyComp />
</>

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

это упрощенный пример, в жизни - это отрисовка highcharts графика который надо сохранить в виде картинки, но для этого необходимо выполнить код

Highcharts.exportChart(options, {
      type: 'image/png',
      filename: 'chart-export',
    });

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

В качестве костыля можно было бы использовать useEffect и передавать какую-нибудь переменную load_counter, но как по мне - это костыль

4
  • Компонент "ниже" не может отдать что либо компоненту "выше". Однако, с помощью объектов js можно попробовать связать функции(будет тоже костыль). Можно еще взять пакет генерации событий, например. По кнопке генерить событие, а в компоненте, при срабатывании события вызывать функцию
    – SwaD
    Commented 22 июн. в 21:32
  • один из ((контекст, реф - вызов сверху), эфект - вызов внутри (не думаю что эффект внутри это кастиль) ), но вообше если options нужны вне, то их надо вынести вне.
    – Armen
    Commented 22 июн. в 21:43
  • @Armen, в том то и дело, что вовне options не нужны, нужно просто сказать компоненту внутри которого options - "а теперь используй их так-то". У Highcharts есть возможность все это впихнуть в меню и тогда будет всё органично, но как раз в меню Highcharts пихать и не хочется, потому что управлять графиком должны другие компоненты
    – Zhihar
    Commented 22 июн. в 21:55
  • @Zhihar по мне это явно ответственость 'useEffect' и не надо нечего придумывать тут. просто передай в props что то что стриггерит логику.
    – Armen
    Commented 25 июн. в 8:41

1 ответ 1

0

Предложу вот такой вариант вызова функции компонента "за пределами" самого компонента

Используем возможности объектов и замыкания функций

const Main = () => {
  // Создаем объект для хранения ссылок на функции
  const functions = {
    fn: null,
  }
  // функция клика, проверяет, что нужный ключ функция и вызывает
  const clk = () => {
    if (typeof functions.fn === 'function') 
      functions.fn();
  }

  return (
    <>
      <button onClick={clk}>Нажми</button>
      <Second fnNames={functions} />
    </>
  )
}

// Дочерний компонент
const Second = ({fnNames}) => {
  const [val, setVal] = useState(0);
  // Функция компонента.
  const handleFN = () => {
    setVal(prev => prev + 1);
  }
  // Присваиваем функцию переменной объекта
  fnNames.fn = handleFN

  return (
    <div>{val}</div>
  )
}

Песочница с примером

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.