如何在 ReactJS 中切換 onClick 類？

Question

在這里 state(menuAction) 在Context.js文件中定義。 現在我想切換類 onClick(id="nav-icon1") 所以需要在Navbar.js訪問該狀態。

它給出了錯誤

類型錯誤：無法讀取未定義的屬性“狀態”

任何幫助或建議表示贊賞。

上下文.js

import React, { Component } from 'react'
import { LinkData } from './LinkData'

const DataContext = React.createContext();

class DataProvider extends Component {
  state = {
    sidebarOpen: false,
    menuAction: false,
    links: LinkData,
  }

  handleSidebar = () => {
    this.setState({ sidebarOpen: !this.state.sidebarOpen })
    this.setState({ menuAction: !this.state.menuAction });
  }

  render() {
    return (
      <DataContext.Provider
        value={{
          ...this.state,
          handleSidebar: this.handleSidebar
        }}
      >
        {this.props.children}
      </DataContext.Provider>
    )
  }
}
const DataConsumer = DataContext.Consumer;

export { DataProvider, DataConsumer }

導航欄.js

import React from 'react'
import styled from 'styled-components'
import { DataConsumer } from '../context/Context'
import { Link } from 'react-router-dom'

function Navbar() {
  const width = window.innerWidth


  return (
    <DataConsumer>
      {value => {
        const { handleSidebar } = value;
        return (
          <NavWrapper>
            <div className="nav-center">
              <img src={require('../logo.png')} alt="babyShark logo" className="logoContainerMini" />
              <div id="nav-icon1" onClick={handleSidebar} className={this.state.menuAction ? 'open' : null}>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </NavWrapper>
        );
      }}
    </DataConsumer>
  )
}

const NavWrapper = styled.nav`
  position: -webkit-sticky;
  position:sticky;
  top:0;
  width:100%;
  padding: 1rem 1.5rem;
  background: var(--mainGrey);
  border-bottom:3px solid var(--primaryColor);
  z-index:1;
.nav-center{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1200px;
  margin:0 auto;
}
.logoContainerMini{
  max-height:50px;
}
#nav-icon1 {
      width: 40px;
      height: 30px;
      position: relative;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      -o-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
      cursor: pointer;
    }

    #nav-icon1 span {
      display: block;
      position: absolute;
      height: 6px;
      width: 100%;
      background: #195587;
      border-radius: 6px;
      opacity: 1;
      left: 0;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
      -webkit-transition: .25s ease-in-out;
      -moz-transition: .25s ease-in-out;
      -o-transition: .25s ease-in-out;
      transition: .25s ease-in-out;
    }

    #nav-icon1 span:nth-child(1) {
      top: 0px;
    }

    #nav-icon1 span:nth-child(2) {
      top: 12px;
    }

    #nav-icon1 span:nth-child(3) {
      top: 24px;
    }

    #nav-icon1.open span:nth-child(1) {
      top: 18px;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
    }

    #nav-icon1.open span:nth-child(2) {
      opacity: 0;
      left: -60px;
    }

    #nav-icon1.open span:nth-child(3) {
      top: 18px;
      -webkit-transform: rotate(-135deg);
      -moz-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }
`;

export default Navbar

Answer 1

首先，您無法從函數組件訪問它，因此您可以將其切換到類組件，或者您應該將父組件中所需的值作為道具傳遞。

此外，當您從當前狀態計算下一個狀態時，您應該這樣做

 this.setState(prevState => {
   return value: !prevState.value   
 });

它更安全。

Answer 2

您已經從DataContext.Provider傳遞menuAction 。 因此，您可以使用DataConsumer值訪問該menuAction 。 所以你不需要在功能組件中使用 this.state 。 片段如何使用它。

<DataConsumer>
  {value => {
    const { handleSidebar, menuAction } = value;
    return (
      ...your code here
    );
  }}
</DataConsumer>

如果這有幫助，請告訴我。