Question

希望您可以为我可能错过/忽略的某些事物提供新鲜的视线。我目前正在使用React创建一个天气应用，并且由于添加了Navbar组件，因此出现错误： “元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但是得到了：对象。您可能忘记了从定义的文件中导出组件，或者可能已经混合使用设置默认名称并命名导入。

检查App的呈现方法。”

但是，我确实导出了组件并将其导入到index.js和app.js中...我想知道我可能忽略了什么吗？谢谢您的帮助！

我检查了创建的每个组件，以查看是否错过了导出任何组件的操作，但是它们都很好。我还检查了尝试导入它们时是否可能没有从正确的路径或文件夹中进行导入，但是它们很好。我在想我的Navbar组件或App组件有问题。

//This is my Navbar Comp

import React, { Component } from 'react';
import './Navbar.css';
import SearchBox from '../SearchBox';
import UnitComponent from '../UnitComponent';

class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <nav>
        <ul className="navbar-container">
          <li className="navbar-list-item">
            <SearchBox />
          </li>
          <li className="navbar-list-item city-name">
            <span className="">New York,US</span>
          </li>
          <li className="navbar-list-item">
            <UnitComponent />
          </li>
        </ul>
      </nav>
    );
  }
}

export default Navbar;

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
import App from './components/App';


const ROOT_NODE = document.getElementById('root');
ReactDOM.render(<App />, ROOT_NODE);

//app.js
import React, { Component } from 'react';
import Navbar from '../Navbar';
import './App.css';


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div> 
        <span><i className="fab fa-react"></i></span>
        <span>Weather App</span>
        <span><i className="wi wi-day-sunny"></i></span>
        <Navbar />
      </div>
    )
  }
}
export default App;

//SearchBox Component

import React, { Component } from 'react';
import './SearchBox.css';



class SearchBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      queryString: ''
    };
  }

  handleQueryStringChange = (e) => {
  this.setState({
    queryString: e.target.value
  })
}

handleSearch = (e) => {
  e.preventDefault();
  console.log('Fetch weather data for:', this.state.queryString);
}

  render() {
    return (
      <div className="form-container">
        <form>
          <input
            type="search"
            value={this.state.queryString}
            name="searchBox"
            id="searchBox"
            placeholder="Enter City or Zipcode" />
          <span className="search-button fa fa-search"></span>
        </form>
      </div>
    );
  }
}

export default SearchBox;

//UnitComponent

import React, { Component } from 'react';
import './UnitComponent.css';

class UnitComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      unit: 'C'
    };
  }

  changeUnit = (e) => {
    const newUnit = e.target.textContent;
    this.setState({
      unit: newUnit
    })
  }
  render() {
    return (
      <div className="unit-container">
        <span className={`unit-value ${this.state.unit === 'C' ? 'active-unit' : ''}`} onClick={this.changeUnit}>C</span>
        <span className={`unit-value ${this.state.unit === 'F' ? 'active-unit' : ''}`} onClick={this.changeUnit}>F</span>
      </div>
      )
  }
}

export default UnitComponent;


[![Folder structure][1]][1]


  [1]: https://i.stack.imgur.com/UWcyc.png
^^in each component folder, there are files such as Navbar.css, Navbar.jsx, index.js

Answer 1

可能是您的导入路径错误。 Here是使用您的代码段编写的演示。它的工作没有任何顾虑。

我在导出组件时丢失了什么吗？

1 个答案: