Обработка событий в разных экспортах с помощью React

Question

Итак, я хотел создать всплывающий элемент div, который будет скользить по бокам, когда объект выбран, и затем выходить при повторном выборе объекта. Я также хочу создать кнопку выхода, которая также закроет div. Я могу в значительной степени понять, как это сделать, за исключением того, что я хочу повторно использовать этот компонент div, поэтому я сохранил его как экспорт в другом файле javascript. Вот где проблема в том, что у меня возникают проблемы при обработке событий в файлах.

Вот мой код:

/*Popup div export*/

export default () => {

  const [toggle, set] = useState(true);

  const { xyz } = useSpring({
      from: { xyz: [-1000, 0, 0] },

    xyz: toggle ? [0, 0, 0] : [-1000, 0, 0]
  });

  return (
    <a.div
      style={{
        transform: xyz.interpolate(
          (x, y, z) => `translate3d(${x}px, ${y}px, ${z}px)`
        )
      }}
      className="expand"
    >
      <Link to={link}>
        <a.button>Next</a.button>
      </Link>
      <button onClick={() => set(!toggle)}>Exit</button>
    </a.div>
  );
};


/*This is where I am implementing the export*/

      <Canvas>

        <Suspense fallback={<Fallback />}>

          <Cube position={[-1.2, 0, 0]} onClick={e => <Toggle />} /> <---/*Here is the click event where I call the div*/-->

          <Cube position={[1.2, 0, 0]} />
        </Suspense>
      </Canvas>

  );
}

Я попытался изменить стиль, чтобы сделать отображение «скрытым» 'and' block ', но это не работает, так как не показывает слайд в анимации, он просто всплывает. Кроме того, если я попытаюсь управлять этим отдельно, например, создать событие click на холсте, чтобы div отображался с реагирующей пружиной, если я пытаюсь использовать кнопку выхода, событие click больше не работает.

Вот моя песочница, чтобы показать, что происходит. : (прошу прощения, если все это кажется сбивающим с толку) Коды находятся на странице 1. js и переключаются. js

https://codesandbox.io/s/sad-goldberg-pmb2y?file= / src / toggle. js: 250-326

Редактировать: более простая визуальная песочница: https://codesandbox.io/s/happy-chatelet-vkzjq?file= / src / page2. js

Answer 1

Ваш пример немного запутан, чтобы подражать, было бы неплохо более простое воспроизведение. Тем не менее, если я понимаю общую цель, я думаю, что вы хотите сохранить какое-то глобальное состояние (возможно, в вашем App.js компоненте), которое имеет какое-то состояние о видимой боковой панели.

Например:

function App() {
  const [sidebarVisible, setSidebarVisible] = React.useState(false)

  const toggleSidebar = () => setSidebarVisible(!sidebarVisible)

  return (
    <Router>
      <Switch>
        <Route path="/page1">
          <Page1 toggleSidebar={toggleSidebar} />
        </Route>
        <Route path="/page2">
          <Page2 toggleSidebar={toggleSidebar} />
        </Route>
        <Route path="/">
          <Start toggleSidebar={toggleSidebar} />
        </Route>
      </Switch>
    </Router>
  )
}

function Page1({ toggleSidebar }) {
  return <Toggle toggleSidebar={toggleSidebar} />
}

function Toggle({ toggleSidebar }) {
  return <button onClick={toggleSidebar}>Toggle</button>
}

Это просто для того, чтобы дать вам идеи, вы, конечно, можете передать функцию setSidebarVisible или создать другую функцию, которая хранит какое-то состояние о том, что должно отображаться на боковой панели.

Вы также можете использовать что-то вроде Redux или React Context для передачи состояния / действий в ваши компоненты.

Надеюсь, что это поможет в некоторой степени ??