Question

我对 React 和 css 还很陌生，我有点卡住了。我有一个动画导航栏，它在单击按钮时打开并填充页面 - 但是，由于我的应用程序的结构方式，我正在努力将组件隐藏在导航下方 - 即主页，作为具有诸如 position: absolute 之类的属性的元素没有隐藏在它下面。

现在，我的 css 类是：

.nav-links.open {
    clip-path: circle(1400px at 95% -10%);
    -webkit-clip-path: circle(1400px at 95% -10%);
    opacity: 1;
  }

  .nav-links.close {
    clip-path: circle(100px at 95% -10%);
    -webkit-clip-path: circle(100px at 95% -10%);
    opacity: 0.7;
  }

我只是用这个来切换类：

toggleNavbar() {
    if (this.state.navBarActive === false) {
      this.setState({
        navBackStyle: 'white',
        navClass: 'nav-links open',
        navBarActive: !this.state.navBarActive,
      });
    } else {
      this.setState({
        navBackStyle: '#5b78c7',
        navClass: 'nav-links close',
        navBarActive: !this.state.navBarActive,
      });
    }
  }

我的 react 组件都在 app.js 里面，里面有一个 components 文件夹，里面有导航栏、home 等。

我的 css 文件也被构造为组件并使用 scss 导入。我知道我可以将所有内容都放在一个文件中，以便更轻松地隐藏其他元素，但这并不容易，因为这是一个大项目。

有没有办法对另一个反应组件隐藏元素？

0 个答案: