ReactJS：如何从Footer中点击<a>为模态框添加.active类

这个问题其实是React开发中非常常见的跨组件通信场景，我给你两个实用的解决方案，都是贴合React核心思想的，你可以根据自己的组件层级来选择：

方案一：状态提升（最推荐的基础方案） #

如果你的Footer和Newsletter组件共享同一个父组件（比如页面的Layout组件），我们可以把模态框的激活状态提到父组件中统一管理，再把控制方法传递给对应的子组件，这样就能轻松实现跨组件触发了。

1. 在共同父组件中管理状态和方法 #

假设你的父组件是Layout.js，我们在这里定义模态框的激活状态isModalActive，以及打开/关闭的方法：

import React from 'react'
import Newsletter from './Newsletter'
import Footer from './Footer'

class Layout extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isModalActive: false
    }
  }

  // 打开模态框的方法
  openNewsletterModal = () => {
    this.setState({ isModalActive: true })
  }

  // 关闭模态框的方法
  closeNewsletterModal = () => {
    this.setState({ isModalActive: false })
  }

  render() {
    return (
      <div className="layout">
        {/* 把激活状态和关闭方法传给Newsletter */}
        <Newsletter 
          isActive={this.state.isModalActive}
          onClose={this.closeNewsletterModal}
        />
        {/* 把打开方法传给Footer */}
        <Footer onOpenNewsletter={this.openNewsletterModal} />
      </div>
    )
  }
}

export default Layout

2. 修改Newsletter组件 #

原来的toggle方法可以替换成父组件传递的onClose，同时根据isActive来动态拼接类名：

import React from 'react'
import PropTypes from 'prop-types';
import Link from 'gatsby-link';

class Newsletter extends React.Component {
  static propTypes = {
    isActive: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired
  }

  render() {
    const { isActive, onClose } = this.props
    // 根据isActive动态生成类名
    const modalClass = isActive ? 'newsletterModal active' : 'newsletterModal'

    return (
      <div className={modalClass}>
        {/* 原来的关闭按钮调用父组件传的onClose方法 */}
        <button onClick={onClose}>关闭模态框</button>
        {/* 这里放你的模态框内容 */}
      </div>
    )
  }
}

export default Newsletter

3. 修改Footer组件 #

在Footer里的<a>标签上绑定父组件传递的onOpenNewsletter方法，注意要阻止默认跳转行为：

import React from 'react'
import PropTypes from 'prop-types';

class Footer extends React.Component {
  static propTypes = {
    onOpenNewsletter: PropTypes.func.isRequired
  }

  render() {
    const { onOpenNewsletter } = this.props
    return (
      <footer className="footer">
        {/* 点击这个链接触发打开模态框 */}
        <a 
          href="#" 
          onClick={(e) => {
            e.preventDefault(); // 阻止默认的页面跳转
            onOpenNewsletter();
          }}
        >
          打开订阅模态框
        </a>
        {/* 其他Footer内容 */}
      </footer>
    )
  }
}

export default Footer

方案二：React Context（适合层级较深的场景） #

如果你的Footer和Newsletter组件层级很深，通过props层层传递太繁琐，可以用React Context来封装模态框的状态和方法，这样任何子组件都能直接访问这些内容。

1. 创建Context #

新建一个NewsletterContext.js文件，用来定义Context的初始值：

import React from 'react'

const NewsletterContext = React.createContext({
  isModalActive: false,
  openModal: () => {},
  closeModal: () => {}
})

export default NewsletterContext

2. 在父组件中提供Context #

还是用Layout.js作为Context的提供者，把状态和方法注入到Context中：

import React from 'react'
import Newsletter from './Newsletter'
import Footer from './Footer'
import NewsletterContext from './NewsletterContext'

class Layout extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isModalActive: false
    }
  }

  openModal = () => {
    this.setState({ isModalActive: true })
  }

  closeModal = () => {
    this.setState({ isModalActive: false })
  }

  render() {
    const contextValue = {
      isModalActive: this.state.isModalActive,
      openModal: this.openModal,
      closeModal: this.closeModal
    }

    return (
      <NewsletterContext.Provider value={contextValue}>
        <div className="layout">
          <Newsletter />
          <Footer />
        </div>
      </NewsletterContext.Provider>
    )
  }
}

export default Layout

3. 修改Newsletter组件消费Context #

让Newsletter组件通过contextType来获取Context里的状态和方法：

import React from 'react'
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
import NewsletterContext from './NewsletterContext';

class Newsletter extends React.Component {
  static contextType = NewsletterContext

  render() {
    const { isModalActive, closeModal } = this.context
    const modalClass = isModalActive ? 'newsletterModal active' : 'newsletterModal'

    return (
      <div className={modalClass}>
        <button onClick={closeModal}>关闭模态框</button>
        {/* 模态框内容 */}
      </div>
    )
  }
}

export default Newsletter

4. 修改Footer组件消费Context #

同样让Footer组件获取Context里的打开方法：

import React from 'react'
import PropTypes from 'prop-types';
import NewsletterContext from './NewsletterContext';

class Footer extends React.Component {
  static contextType = NewsletterContext

  render() {
    const { openModal } = this.context
    return (
      <footer className="footer">
        <a 
          href="#" 
          onClick={(e) => {
            e.preventDefault();
            openModal();
          }}
        >
          打开订阅模态框
        </a>
        {/* 其他Footer内容 */}
      </footer>
    )
  }
}

export default Footer

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