reactjs - 无法从我的 React 上下文中的多个图层文件夹导入文件

Question

我正在练习我的 React Context。我创建了 Provider 并尝试从多层文件夹中使用 Consumer。但是我无法导入我的 CountContext。它一直给我这个错误信息

./src/Count/Test1Folder/Test2Folder/Test3Folder/Test4Folder/TestValue.js Module not found: Can't resolve './Count/CountContext' in '/Users/qiangbarejie/Documents/web_dev_training/react/mycontext/src/Count /Test1Folder/Test2Folder/Test3Folder/Test4Folder'"

这是我的代码，如果有人可以帮助我，我将不胜感激，谢谢！

我创建了一个名为 Count 的 React.createContex 单独文件夹和名为 CountContext.js 的文件，其目录路径为：src/Count/CountContext.js

import React from 'react'

export const CountContext = React.createContext();

我的 App.js 如下所示：

import React, {Component} from 'react'
import {CountContext} from './Count/CountContext'
import Container1 from './Count/Container1'
import Container2 from './Count/Container2'
import {Grid, Col, Row} from 'react-bootstrap'
import './App.css';
import NavBar from './Nav/NavBar'
import Products1 from './Pages/Products1'
import Products2 from './Pages/Products2'
import Products3 from './Pages/Products3'
import Products4 from './Pages/Products4'
import Products5 from './Pages/Products5'
import Products6 from './Pages/Products6'
import Products7 from './Pages/Products7'
import Products8 from './Pages/Products8'
import TestValue from './Count/Test1Folder/Test2Folder/Test3Folder/Test4Folder/TestValue'

class App extends Component{
  constructor(props){
    super(props);
    this.state={
      text: '',
      contextState:{
        count: 0,
        increment: this.increment,
        clearValue: this.clearValue,
        test: this.testValue
      }
    };
  }
  testValue = () => {
    this.setState({
      contextState: { test: this.state.contextState.test = "TEST"}
    })
  }
increment = () => {
  this.setState({
    contextState: {...this.state.contextState, count: this.state.contextState.count + 1} });
  }

clearValue = () => {
    this.setState({
      contextState: {...this.state.contextState, count: this.state.contextState.count = 0}
    })
}

onChange = e => {
  const {value, name} = e.target;
  this.setState({[name]: value});
  }

render(){
  return(
    <CountContext.Provider value={this.state.contextState}>
      <Grid className="gridwrapper">
      <React.Fragment>
      <Row className="show-grid">
            <Col>
                <NavBar />
            </Col>

            <Col xs={6} md={3}>
              <div>
              #1 Col xs={6} md={3}
              <br />
              Count: {this.state.contextState.count}</div>
              <Products1 />
              <TestValue />
            </Col>

            <Col xs={6} md={3}>
              #2 Col xs={6} md={3}
              <Products2 />
            </Col>

            <Col xs={6} md={3}>
              #2 Col xs={6} md={3}
              <Products2 />
            </Col>

            <Col xs={6} md={3}>
              #2 Col xs={6} md={3}
              <Products2 />
            </Col>
      </Row>

      <Row className="show-grid">
            <Col xs={6} md={3}>
              #3 Col xs={6} md={3}
              <Container1 />
              <input name="text" value={this.state.text} onChange={this.onChange} />
              <Products3 />
            </Col>

            <Col xs={6} md={3}>
              #4  Col xs={6} md={3}
              <Container2 />
              <Products4 />
            </Col>

            <Col xsHidden md={3}>
              <div>
              #5 Col xsHidden md={3}
              <Products5 />
              </div>
            </Col>

            <Col xsHidden md={3}>
              <div>
              #5 Col xsHidden md={3}
              <Products5 />
              </div>
            </Col>
      </Row>
      <hr />
      <Row className="show-grid">
            <Col xs={6} xsOffset={3}>
              <div>
              #6 Col xs={6} xsOffset={3}
              <Products6 />
              </div>
            </Col>

            <Col xs={6} xsOffset={3}>
              <div>
              #6 Col xs={6} xsOffset={3}
              <Products6 />
              </div>
            </Col>
      </Row>

      <hr />
      <Row className="show-grid">
            <Col md={6} mdPush={6}>
              <div>
              #7 Col md={6} mdPush={6}
              <Products7 />
              </div>
            </Col>

            <Col md={6} mdPull={6}>
              <div>
              #8 Col md={6} mdPull={6}
              <Products8 />
              </div>
            </Col>
      </Row>

      </React.Fragment>
      </Grid>
    </CountContext.Provider>
     )
  }
}
export default App

我在这个目录路径下创建了一个名为 TestValue.js 的文件

src/Count/Test1Folder/Test2Folder/Test3Folder/Test4Folder/TestValue.js

import React, {Component} from 'react'
import {CountContext} from './Count/CountContext'

class TestValue extends Component {
  render(){
    return(
    <CountContext.Consumer>
      {testValue => testValue = {testValue}}
    </CountContext.Consumer>
    )
  }
}
export default TestValue

标签： reactjsreact-context