如何使用 React 上下文 API？

Question

我有一个带有全局元素（自定义光标，即鼠标后的圆形 div）的 React 应用程序（使用 CRA 设置），当悬停不同嵌套的其他各种组件时，我想更新/更改其样式，或者不那么深入（在下面提供的结构中，我仅列出一个示例组件）。据我了解，这是 Context API 的一个很好的用例。

我的 App 的结构如下（简化）：

<Cursor />
<Layout>
  <Content>
    <Item />
  </Content>
</Layout>

所以当悬停<Item />（在其他组件中）时，我想更新<Cursor /> 组件的样式。

因此，我尝试访问我在 <Cursor /> 组件中设置的函数，位于 <Item /> 组件中。不幸的是，悬停时它不会更新我的状态，因此我的<Cursor /> 的样式不会改变。

我的光标组件看起来像这样（简化）：

import React, { Component } from "react"
export const CursorContext = React.createContext(false)

class Cursor extends Component {

  constructor(props) {
    super(props)
    this.state = {
      positionX: 0,
      positionY: 0,
      scrollOffsetY: 0,
      display: "none",
      isHoveringProjectTeaserImage: false,
    }
    this.handleMousePosition = this.handleMousePosition.bind(this)
    this.handleMouseOverProjectTeaser = this.handleMouseOverProjectTeaser.bind(this)
    this.handleMouseLeaveProjectTeaser = this.handleMouseLeaveProjectTeaser.bind(this)
  }

  handleMousePosition = (mouse) => {
    this.setState({
      positionX: mouse.pageX,
      positionY: mouse.pageY,
      display: "block",
      scrollOffsetY: window.pageYOffset
    })
  }

  handleMouseOverProjectTeaser = () => {
    this.setState({
      isHoveringProjectTeaserImage: true
    })
  }

  handleMouseLeaveProjectTeaser = () => {
    this.setState({
      isHoveringProjectTeaserImage: false
    })
  }

  componentDidMount() {
    document.body.addEventListener("mousemove", this.handleMousePosition)
  }

  componentWillUnmount() {
    document.body.removeEventListener("mousemove", this.handleMousePosition)
  }

  render() {

    const {
      positionX,
      positionY,
      display,
      scrollOffsetY,
      isHoveringProjectTeaserImage
    } = this.state

    return(

    <CursorContext.Provider value={this.state}>
      <div>
        <StyledCursor
          style={ isHoveringProjectTeaserImage
                  ? {backgroundColor: "red", display: `${display}`, top: `${positionY - scrollOffsetY}px`, left: `${positionX}px`}
                  : {backgroundColor: "yellow", display: `${display}`, top: `${positionY - scrollOffsetY}px`, left: `${positionX}px`}}
        />
      </div>
    </CursorContext.Provider>
    )
  }

}

export default Cursor

我的可以悬停的Item Component看起来像这样（简化）：

import React, { Component } from "react"
import { CursorContext } from '../Cursor/Index';

class Item extends Component {
  constructor(props) {
    // not showing stuff in here that's not relevant
  }

  static contextType = CursorContext

  render() {
    return(
      <CursorContext.Consumer>
        {(value) =>
          <StyledItem
            onMouseOver={value.handleMouseOverProjectTeaser}
            onMouseLeave={value.handleMouseLeaveProjectTeaser}
          >
          </StyledItem>
        }
      </CursorContext.Consumer>
    )
  }

}

export default Item

我还需要使用static contextType = CursorContext吗？

当不传递默认值时（我认为它们无论如何都是可选的）我得到一个TypeError: Cannot read property 'handleMouseOverProjectTeaser' of undefined，只要我传递一个很长的false 作为默认值，我的应用程序就会呈现但不会更新我的<Cursor />状态。

我是否正确使用了 Context API？

Answer 1

React.createContext 默认值？

正如您所说的那样，在这种情况下，传递给 React.createContext() 的值无关紧要。

当不传递默认值时（我认为它们无论如何都是可选的）我得到一个 TypeError: Cannot read property 'handleMouseOverProjectTeaser' of undefined, 只要我传递了一个很长的 false 作为默认值，我的应用程序就会呈现但没有更新我的状态。

这表明您的默认值始终被使用：尝试运行 undefined.blahblah 与 false.blahblah：前者抛出 TypeError 而第二个静默返回 undefined。

所以我们知道您在<Provider value={...}> 中设置的值永远不会到达消费者，但是为什么？

上下文仅对其后代可用

<C.Consumer> 未呈现为<C.Provider> 的后代，因此无法访问它。换句话说，提供者应该“包围”消费者。来自文档：

上下文旨在共享可被视为 React 组件树“全局”的数据 [...]

那棵树的根是你的<C.Provider>，在你的情况下，消费者不是那棵树的一部分。

类似的东西可以工作：

<CursorContext>
  <StyledCursor />
  <Layout>
    <Content>
      <Item />
    </Content>
  </Layout>
</CursorContext>

杂项

我什至需要使用静态 contextType = CursorContext 吗？

如果您使用的是<CursorContext.Consumer>，则不是。来自文档：

Context.Consumer：订阅上下文更改的 React 组件。

但在您的情况下，由于您不需要监听上下文更改（无论如何都来自您的示例代码），只需保留 static contextType:

  static contextType = CursorContext

  render() {
    return(
      <StyledItem
        onMouseOver={this.context.handleMouseOverProjectTeaser}
        onMouseLeave={this.context.handleMouseLeaveProjectTeaser}
      >
      </StyledItem>
    )
  }

关键是你应该使用其中一个，你不需要两个。

---

最后一件事，您在提供程序中传递this.state，并在子组件中使用this.context.handleMouseOverProjectTeaser...但是<Cursor> 的状态中没有这样的功能。也许您打算传递 <Cursor> 本身，或者更好的是，只传递处理程序？