React: вызов функции, описанной в компоненте, из вне компонента

Question

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

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, но как по мне - это костыль

Answer 1

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

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

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>
  )
}

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

БЛОГ НА HUSL

React: вызов функции, описанной в компоненте, из вне компонента

Ответы (1 шт):