экспортировать крючки в React для вложенных компонентов?

Question

Я экспортирую хуки с вложенными компонентами, чтобы родитель мог переключать состояние дочернего элемента. Как я могу заставить этот переключатель работать с хуками вместо классов classi c или функций старой школы?

Дочерний компонент

export let visible;
export let setVisible = () => {};

export const ToggleSwitch = () => {
    const [visible, setVisibile] = useState(false);
    return visible && (
       <MyComponent />
    )
}

Parent

import * as ToggleSwitch from "ToggleSwitch";

export const Parent: React.FC<props> = (props) => {
    return (
       <div>
          <button onClick={() => ToggleSwitch.setVisible(true)} />
       </div>
    )
}

Ошибка: Линтер говорит, что [setVisible] неиспользуемая переменная в дочернем элементе ... (но требуется в родительском элементе)

Answer 1

Как вы знаете, React является односторонней привязкой данных, поэтому, если вы хотите передать какой-либо реквизит или заявить, у вас есть только один способ сделать это, передав его от родительского к дочернему компоненту, и если логика c станет больше, вам придется сделать его глобальным состоянием, используя библиотеку управления состоянием или контекстный API с хуками реагирования, использовать редуктор и эффект использования.

Answer 2

Вы можете переместить видимое состояние в родительский режим следующим образом:

const Child = ({ visible }) => {
    return visible && <h2>Child</h2>;
};

const Parent = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div>
        <h1>Parent</h1>
        <Child visible={visible} />
        <button onClick={() => setVisible(visible => !visible)}>
            Toggle
        </button>
    </div>
  );
};

Если у вас много дочерних компонентов, вы должны сделать более сложные логи c в setVisible. Поместите объект в useState, где свойствами этого объекта будут все имена (идентификаторы) дочерних компонентов