反应-在主组件内添加子组件

Question

  

我创建了一个React应用。

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

主要组成部分

  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);

  

我在导入子组件后进行了更新并附加了新组件   错误信息。我正在使用Stater工具包来创建此应用。所以我说的时候已经有一些组成部分了。大多数情况下，我在render方法中进行了编辑。   请在下面找到错误消息。谢谢...

enter image description here

Answer 1

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

import Search from '../search';

父组件中的

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

import Search from './subfolder/search';

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

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

export default Search;

或您的情况：

export default withRouter(Search)