Можно ли определить вложенный компонент с помощью React Hooks? - PullRequest
Новая
       21

Можно ли определить вложенный компонент с помощью React Hooks?

1 голос
/ 06 марта 2020

Я использую Крючки + Render Props в моем приложении Preact / React. Вместо того, чтобы передавать простое состояние в render(), я передаю компонентную функцию , которая может использоваться пользователем этого компонента.

Кроме того, мой компонент является гибридным в том смысле, что что SortDropdown не является UI-Less, как мы обычно имеем с Render Prop компонентами. Он предоставляет базовый пользовательский интерфейс c в виде элемента привязки, который вызывает фактическое раскрывающееся меню и показывает пользовательский контент с помощью функции Render Props render. Вот как я это реализовал: 

export function SortDropdown(props: SortDropdownProps) {
  const { render, onSelect, value } = props;

  const anchor = (ref: Ref<Element>, open: VoidFunction) => (
    <SortButton buttonElm={ref} onClick={open} />
  );

  const surfaceContent = (ref: Ref<any>, select: SortSelectFn) => {

    // NESTED INNER COMPONENT - IS IT RIGHT?
    function SortMenuItem(props: SortMenuItemProps) {

      const { children, field } = props;

      // THE HOOK IN QUESTION
      const [someState, setSomeState] = useState(false);

      const isSelected = value.key === field.key;

      const onClick = () => select(field);

      return (
        <SortMenuButton canTrigger={someState} selected={someState} onClick={onClick}>
          {children}
        </SortMenuButton>
      );
    }

    return (
      <div ref={ref}>{render(SortMenuItem, select)}</div>
    );
  };

  return (
    <BaseDropdown anchor={anchor} surface={surfaceContent} onSelect={onSelect as any} />
  );
}

Здесь у меня два вопроса. Во-первых, нарушает ли определение внутреннего вложенного компонента, здесь - SortMenuItem, который затем передается функции render, правила Hooks ? Компонент может вызываться n раз или вообще не использоваться вызывающим компонентом.

Во-вторых, правильно ли определять вложенный компонент высшего порядка , здесь - SortMenuItem является абстракцией над SortMenuButton?

...