Заметки про React(@ru_react_notes). Инверсия управления и внедрение JSX через Context API Инверсия управления

Инверсия управления и внедрение JSX через Context API Инверсия управления – это принцип проектирования, который позволяет вызывающему коду контролировать внешнее окружение вызываемой программы. Использование этого принципа в React позволяет создавать более гибкие и кастомизируемые компоненты. Для того, чтобы показать как использовать этот принцип в React, автор создал компонент переиспользуемой таблицы, в которой есть отдельный столбец с действиями над строками. У каждой строки может быть свой набор действий и, чтобы контролировать это, можно использовать IoC. Для того чтобы рендерить для каждой строки кастомный набор действий, можно использовать контекст для передачи функции рендера. Функция рендера будет возвращать готовый JSX для рендера, который будет контролировать компонент, использующий таблицу.

const TableColumnActions = props => {
  const { row, column } = props;
  const [openActions, setOpenActions] = useState(false);
  useOnClickOutside(popupRef, () => setOpenActions(false));
  const renderMenu = useTableActionsContext();

  const menuOptions = renderMenu({
    row,
    column,
    styles,
  });

  return (
    <div className="relative">
      {openActions ? (
          <ul className={styles.actionsMenu}>{menuOptions}</ul>
      ) : null}
    </div>
  );
};

theroadtoenterprise.com/blog/re…text-api