传递了一个函数作为道具，但它没有在 React 的子组件中执行

Question

我正在使用语义反应 ui 来制作菜单。利用活动状态功能。在这种情况下，当您访问链接时，它会获得焦点或下划线。然而，在我的实现中，我将它作为道具传递给子组件。见下文...class DesktopContainer extends Component { state = {} handleItemClick(event) {  var { name } = event.target;  this.setState({   activeItem: name  }) } render() {  const { GenericHeadingComponent, children, getWidth, isLoggedIn, logOutUser } = this.props  const { fixed, activeItem } = this.state  return (   <Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>        <GenericIsUserLoggedInLink         isHomeButton={true}         key="1"         name='home'         active={activeItem === 'home'}         handleItemClick={this.handleItemClick} /* is this correct */         mobile={false}        />        <GenericIsUserLoggedInLink         isLoggedIn={isLoggedIn}         route="/profile"         anchorText="Profile"         key="2"         name='profile'         active={activeItem === 'profile'}         handleItemClick={this.handleItemClick} /* is this correct */         mobile={false}        />        <GenericIsUserLoggedInLink         isLoggedIn={isLoggedIn}         route="/dashboard"         anchorText="Dashboard"         key="3"         name='dashboard'         active={activeItem === 'dashboard'}         handleItemClick={this.handleItemClick}  /* is this correct */         mobile={false}        />        <Menu.Item position='right'>         <Button inverted={!fixed}>          <GenericIsUserLoggedInLink           route="/login"           isLoggedIn={isLoggedIn}           logOutUser={logOutUser}           key="4" />         </Button>         <Button inverted={!fixed} primary={fixed} style={{ marginLeft: '0.5em' }}>          <Link href="/register">           <a>Register</a>          </Link>         </Button>        </Menu.Item>       </Container>      </Menu>      <GenericHeadingComponent />     </Segment>    </Visibility>    {children}   </Responsive>  ) }}我应该将状态移到 HOC 中吗？我没有收到错误，所以我很难过。

Answer 1

首先，您的 handleClick 在设置状态时会由于this. 所以我建议你要么在构造函数中绑定它，要么把它改成这样的箭头函数 -

handleItemClick = (e) => {}

现在，我已经在几个项目中使用了 Semantic-ui-react，并且点击事件的运行方式有点不同。根据文档 -

Called on click. When passed, the component will render as an `a`

tag by default instead of a `div`.

onClick(event: SyntheticEvent, data: object)

event

React's original SyntheticEvent.

data

All props.

所以改变你的 onClick 到onClick={handleItemClick}then

 handleItemClick = (e, { name }) => this.setState({ activeItem: name })

我希望这可以帮助你。

更新：您的最新错误是因为<a>链接中的标签。链接来自react-router就像一个标签，我们知道

<a href="1">

    <a href="2"></a>

</a>

是无效的 HTML。您可以参考此问题了解更多信息Link 不能作为链接的后代出现。

要解决您的错误，只需删除标签内的标签即可。

更新： -

最新的错误是因为您在 handleItemClick 中传递名称

if (isHomeButton) {

 return <Link href="/"><Menu.Item name={name} active={activeItem === name} onClick={handleItemClick}></Menu.Item></Link> //change the onClick here//

}

Answer 2

你可以尝试在构造函数中绑定你的方法吗

class DesktopContainer extends Component {

  constructor(props) {

    super(props);

    this.state = {};

    this.handleItemClick = this.handleItemClick.bind(this);

  }

  // remaining code

}

希望能帮助到你