反应-在主组件中添加一个 child 组件

Question

I creating a react app.

当我尝试在 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 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);

child分量

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

I updated after importing the child component and attached the new error message. I am using a stater kit to create this app. so some of the component parts already there when I stated. mostly I edited inside the render method. please find the error message below .thanks...

enter image description here

Answer 1

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

import Search from '../search';

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

import Search from './subfolder/search';

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

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

export default Search;

或者您的情况：

export default withRouter(Search)

反应-在主组件中添加一个 child 组件

react- adding a child component inside a main component

javascript

ecmascript-6

reactjs

react-starter-kit

react-component

主要成分

child分量