在这里状态(menuAction)在Context.js文件中定义。现在,我想切换类onClick(id =“ nav-icon1”),因此需要在Navbar.js中访问该状态。
它给出错误“ TypeError:无法读取未定义的属性'状态']
感谢任何帮助或建议。
Context.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 }
Navbar.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
首先,您不能从功能组件访问此控件,因此也许可以将其切换到类组件,或者应该从父组件传递所需的值作为道具。
此外,当您从当前状态计算下一个状态时,也应该这样做
this.setState(prevState => {
return value: !prevState.value
});
更安全。