React Hooks: переход не работает с Node в качестве Prop

Question

У меня есть выпадающий список с React Hooks. На кнопке должна быть стрелка, которая вращается. Моя первая версия работает нормально:

 const DropdownMenu= (props) => {
      const [open, setOpen] = useState(false);
      const openDropdown = (): void => setOpen(prevState => !prevState);

      return (
        <div>
          <Button
            onClick={openDropdown}
            dropdownIsOpen={open}
          >
Text </Button>
          <DropdownContent isOpen={isOpen} />
        </div>
      );
    };

    export default DropdownMenu;

const Button = (props) => {
  return (
    <Button Click={props.onClick}>
        Text
        <Arrow rotate={props.dropdownIsOpen} color={designTheme.color.primary} />
    </Button>
  );
};

export default Button;

Но теперь у меня есть несколько выпадающих меню, и я хочу использовать их с одним и тем же компонентом. Я дал toggleNode как опору. Теперь стрелка вращается, но без перехода:

const DropdownButton = (props) => {
  const [isOpen, setOpen] = useState(false);
  const onToggle = (): void => setOpen(prevState => !prevState);
  return (
    <Dropdown
      isOpen={props.isOpen}
      onToggle={onToggle}
      toggleNode={
        <Button dropdownIsOpen={isOpen}>
          Text
        </Button>
      }
    />
  );
};

export default DropdownButton;

У кого-нибудь есть идеи?

Спасибо!

Answer 1

Учитывая, что ваш Button компонент принимает onClick опору:

const Button = (props) => {
  return (
    <Button Click={props.onClick}>
        Text
        <Arrow rotate={props.dropdownIsOpen} color={designTheme.color.primary} />
    </Button>
  );
};

ПРИМЕЧАНИЕ: Как указывает @SagarMore, между также может быть конфликт имен некоторые импортированные Button компоненты и ваш Button компоненты.

Возможно, вам просто нужно передать обратный вызов Click (ужасное имя, BTW, должно быть onClick, надеюсь, это была просто опечатка):

const DropdownButton = (props) => {
  const [isOpen, setOpen] = useState(false);
  const onToggle = (): void => setOpen(prevState => !prevState);
  return (
    <Dropdown
      isOpen={props.isOpen}
      onToggle={onToggle}
      toggleNode={
        <Button onClick={onToggle} dropdownIsOpen={isOpen}>
          Text
        </Button>
      }
    />
  );
};

Передача onToggle в обработчик onClick внутренней кнопки должен теперь переключать состояние isOpen DropDown.

Answer 2

Это была моя ошибка.

В моем компоненте Dropdown я делаю два разных состояния условными. Таким образом, он отображает начальное или конечное состояние и не использует анимацию. Мне нужно визуализировать анимацию, а не нажимать новую, когда я нажимаю, чтобы анимация работала.

Answer 3

Я думаю, вы экспортируете разные Button

Как вы можете использовать Button внутри Button, возможно, импортируя Button из другого места. И тогда вы снова экспортируете Button. Это может привести к путанице для транспилера, который Button будет экспортирован.

Возможно, вы захотите переименовать свою пользовательскую кнопку в другое

const Button = (props) => {
  return (
    <Button Click={props.onClick}>
        Text
        <Arrow rotate={props.dropdownIsOpen} color={designTheme.color.primary} />
    </Button>
  );
};

export default Button;