Реакция - добавление дочернего компонента в основной компонент

Question

Я создал приложение реагировать.

когда я пытаюсь импортировать компонент внутри заголовка приложения становится пустым в браузере. ниже мой код

главный компонент

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

Я обновил после импорта дочернего компонента и прикрепил новое сообщение об ошибке. Я использую стартовый комплект для создания этого приложения. поэтому некоторые из составных частей уже там, когда я заявил. в основном я редактировал внутри метода рендеринга. пожалуйста, найдите сообщение об ошибке ниже. спасибо...

введите описание изображения здесь

Answer 1

Дочерний компонент должен быть сначала импортирован в родительский компонент, чтобы его можно было использовать. Для этого:

import Search from '../search';

в родительском компоненте. Это будет работать, только если родительский компонент находится в той же папке, что и дочерний, в противном случае вам придется изменить путь, например:

import Search from './subfolder/search';

Не помещайте {Поиск}, поскольку это экспорт по умолчанию, а не именованный экспорт.

Более того, дочерний компонент должен быть экспортирован по умолчанию:

export default Search;

или в вашем случае:

export default withRouter(Search)