Gatsby+React中跨组件传递className并触发onClick的实现问题

看起来你已经走在正确的路上了！让我帮你梳理问题并给出可行的解决方案：

你的问题背景 #

你在基于Gatsby的React项目中，希望给layouts/index.js里的Menu组件添加动态className，而触发状态切换的点击事件放在了独立的MenuButton组件中。目前你已经在父组件Template里维护了navIsVisible状态，也把状态切换方法传给了MenuButton，但还没让Menu组件正确接收到并应用这个className，同时你也想了解是否能在Menu.js内部处理状态变更。

你现有的代码 #

layouts/index.js #

class Template extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      navIsVisible: false,
    }
    this.handleNavIsVisible = this.handleNavIsVisible.bind(this)
  }

  handleNavIsVisible() {
    this.setState({ navIsVisible: !this.state.navIsVisible })
  }

  render() {
    const { children } = this.props
    return (
      <div>
        <MenuButton navIsVisible={this.handleNavIsVisible}/>
        <div className="page">
          ...
        </div>
        {/* 你已经在这里尝试传递className，但可能Menu组件没正确接收 */}
        <Menu className={`${this.state.navIsVisible ? 'nav-is-visible' : ''}`}/>
      </div>
    )
  }
}

MenuButton.js #

import PropTypes from 'prop-types';

class MenuButton extends Component {
  constructor(props) {
    super(props)
    this.menuClick = this.menuClick.bind(this)
  }

  menuClick(){
    this.props.navIsVisible();
  }

  render () {
    return (
      <div className="sticky-menu-button">
        <span onClick={this.menuClick}>Menu</span>
      </div>
    )
  }
}

MenuButton.propTypes = {
  navIsVisible: PropTypes.func,
}

解决方案 #

1. 让Menu组件正确接收并应用传入的className #

你在Template里给Menu传递className的写法是对的，但必须确保Menu组件内部把这个className加到它的根DOM元素上，否则样式不会生效。打开你的Menu.js，修改render方法：

class Menu extends React.Component {
  render() {
    // 合并组件自身的基础类名和传入的动态类名
    const combinedClasses = `your-menu-base-class ${this.props.className || ''}`;
    
    return (
      {/* 把合并后的类名加到根元素上 */}
      <div className={combinedClasses}>
        {/* 你的Menu内容 */}
        ...
      </div>
    );
  }
}

这样当navIsVisible变为true时，nav-is-visible类就会被正确应用到Menu的根元素上了。

2. 简化MenuButton的代码（可选优化） #

你当前的menuClick方法只是单纯调用props传来的函数，可以直接简化，省去不必要的绑定操作：

import PropTypes from 'prop-types';

class MenuButton extends Component {
  render () {
    return (
      <div className="sticky-menu-button">
        {/* 直接把props的方法绑定到onClick上 */}
        <span onClick={this.props.navIsVisible}>Menu</span>
      </div>
    )
  }
}

MenuButton.propTypes = {
  navIsVisible: PropTypes.func,
}

关于“能否在Menu.js里处理状态”的问题 #

当然可以，但需要调整状态管理的方式，不过要根据你的组件结构来选择：

• 方案一：把状态移到Menu组件内部
  如果MenuButton是Menu的子组件，或者两者可以紧密耦合，你可以把navIsVisible状态放在Menu里，然后把状态切换方法传给MenuButton。但如果这两个组件在页面上的位置是分离的（比如按钮在顶部，菜单在侧边），这种耦合会增加维护成本。

• 方案二：使用全局状态管理
  比如React Context或者Redux，但对于这种简单的UI切换状态来说，有点过度设计了。

更推荐你当前的方案：在父组件Template里管理状态，通过props把状态和方法传递给子组件，这是React推崇的单向数据流模式，组件职责清晰，维护起来更简单。

内容的提问来源于stack exchange，提问作者Darren