1

我创建了一个反应应用程序。

当我尝试在标题应用程序中导入组件时，浏览器中变为空白。下面是我的代码

主要成分

  import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Nav,
  Navbar,
  Collapse,
  DropdownMenu,
  DropdownItem,
  NavbarToggler,
  DropdownToggle,
  UncontrolledDropdown,
} from 'reactstrap';
import { Link, withRouter } from 'react-router-dom';
import Config from '../../../constants/config';
//import { SidebarNavItems } from '../Sidebar';
import Search from '../search';
import logoImages from '../../../images/logo.png';

require('./styles.scss');

class Header extends Component {
  static propTypes = {
    member: PropTypes.shape({
      firstName: PropTypes.string,
      email: PropTypes.string,
    }),
    logout: PropTypes.func.isRequired,
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
    }).isRequired,
  };

  static defaultProps = {
    member: {},
  };

  constructor(props) {
    super(props);

    this.toggleDropDown = this.toggleDropDown.bind(this);
    this.state = { isOpen: false };
  }

  onLogout = () => {
    const { logout, history } = this.props;
    logout().then(() => history.push('/login'));
  };

  toggleDropDown = () => {
    const { isOpen } = this.state;
    this.setState({ isOpen: !isOpen });
  };

  render() {
    const { member } = this.props;
    const { isOpen } = this.state;
    const loggedIn = !!(member && member.email);

    return (
      <header className="header_warp">
        <Navbar className="header_inner">
          <div className="logomain">
            <a to="/" className="" style={{ color: '#FFF' }}>
              <img src={logoImages} className="logo" title={Config.appName} alt={Config.appName} />
              <h1>Capture The Moment  <span>A Picture Worth a Thousand Words</span></h1>
            </a>
          </div>
        <Search/>
        </Navbar> 
      </header>
    );
  }
}

export default withRouter(Header);

子组件

     import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Nav,
  Navbar,
  Collapse,
  DropdownMenu,
  DropdownItem,
  NavbarToggler,
  DropdownToggle,
  UncontrolledDropdown,
} from 'reactstrap';
import { Link, withRouter } from 'react-router-dom';
import Config from '../../../constants/config';
import { SidebarNavItems } from '../Sidebar';

import logoImages from '../../../images/logo.png';

require('./styles.scss');

class Search extends Component {
  static propTypes = {
    member: PropTypes.shape({
      firstName: PropTypes.string,
      email: PropTypes.string,
    }),
    logout: PropTypes.func.isRequired,
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
    }).isRequired,
  };

  static defaultProps = {
    member: {},
  };

  constructor(props) {
    super(props);

    this.toggleDropDown = this.toggleDropDown.bind(this);
    this.state = { isOpen: false };
  }

  onLogout = () => {
    const { logout, history } = this.props;
    logout().then(() => history.push('/login'));
  };

  toggleDropDown = () => {
    const { isOpen } = this.state;
    this.setState({ isOpen: !isOpen });
  };

  render() {
    const { member } = this.props;
    const { isOpen } = this.state;
    const loggedIn = !!(member && member.email);

    return (
      <div className="header_warp">
       fgfdgfd tgrtgr
      </div>
    );
  }
}

export default withRouter(Search);

我在导入子组件后更新并附加了新的错误消息。我正在使用一个状态工具包来创建这个应用程序。所以当我说的时候，一些组件已经在那里了。主要是我在渲染方法中编辑的。请在下面找到错误消息。谢谢...

在此处输入图像描述

4

1 回答 1

1

子组件必须首先导入到父组件中才能使用。为此：

import Search from '../search';

在父组件中。这仅在父组件与子组件位于同一文件夹中时才有效，否则您必须调整路径，例如：

import Search from './subfolder/search';

不要放置 { Search }，因为它是默认导出而不是命名导出。

此外，子组件必须默认导出：

export default Search;

或者在你的情况下：

export default withRouter(Search)
于 2018-08-08T08:14:15.820 回答