Question

我有一个自定义导航菜单，我想用于我正在创建的反应中的网站，我希望导航菜单单击时导航链接移出。

我会自动假设有一些部分不正确，就像我传递道具一样。

附注我在这个项目中使用样式化的组件，所以名称中带有样式的任何东西都与样式化的组件有关，也是我想通过使用navItem分离组件的主要原因是我可以用不同的方式操作它们CSS。

我认为最好将我正在使用的所有文件链接到Navlink： -

import React, { Component } from "react";
import NavItemStyle from "./NavItemStyle";

class NavItem extends Component {
  render() {
    return (
      <NavItemStyle>
        <ul onClick={this.props.click}>
          <li value={this.props.nav}>
          </li>
          <li value={this.props.children}>
          </li>
        </ul>
      </NavItemStyle>
    );
  }
}
export default NavItem;

这是NavItems部分，我假设这是完全错误的。

import React, { Component } from "react";
import NavItem from './NavItem/NavItem';

class NavItems extends Component {

  render() {

    return this.props.navlists.map((navItem) => {
      return <NavItem
          click={() => this.props.clicked}
        />
    });
  }
}
export default NavItems;

这是将在App。

中链接的主要导航组件

import React, {Component} from "react";
import NavMenu from "./NavMenu/NavMenu";
import NavItem from './NavLists/NavItem/NavItem';
import NavStyle from './NavStyle';

class Navigation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showMenu: false
    }
  }

  handleClick() {
    this.setState({showMenu: !this.state.showMenu})
  }
  render() {


  return (
    <NavStyle>
      <NavMenu/>
      {/*Nav items Display Home and Things to do.*/}
      <NavItem />
      <NavItem />
    </NavStyle>
  );
}
}


export default Navigation;

另外为了节省大量代码行，我将NavMenu（汉堡）放在粘贴箱上： - https://pastebin.com/T671GBjF

我希望最终结果是按下汉堡时链接到页面显示。

Answer 1

是的，你没有正确传递道具。实际上，你根本没有传递它们。

为了在子组件中使用prop，您需要从父组件传递它们。因此，在导航类中，您需要执行以下操作：

<NavItem click={this.handleClick} nav={this.somethingItsNotClearForMe}>
   This text would be props.children on the NavItem
</NavItem>

我想你需要得到这样的逻辑，即在继续之前将道具从父母传递给孩子

React Custom Built Navbar

1 个答案: