During the introduction to React, ask questions about import.

Inside the components folder

import React from 'react';
import Navbar from 'bloomer';
import './Navbar.css';

        const Navbar = () => {
        return (
            <main className="todo-list-template">
            <Navbar style={{ border: 'solid 1px #00D1B2', margin: '0' }}>
        <NavbarBrand>
            <NavbarItem>
                <img src={brand} style={{ marginRight: 5 }} /> Bloomer
            </NavbarItem>
            <NavbarItem isHidden='desktop'>
                <Icon className='fa fa-github' />
            </NavbarItem>
            <NavbarItem isHidden='desktop'>
                <Icon className='fa fa-twitter' style={{ color: '#55acee' }} />
            </NavbarItem>
            <NavbarBurger isActive={this.state.isActive} onClick={this.onClickNav} />
        </NavbarBrand>

If you just import Navbar here, there will be an error.

Failed to compile.

./src/components/Navbar.js
  Line 9:   'NavbarBrand' is not defined     react/jsx-no-undef
  Line 10:  'NavbarItem' is not defined      react/jsx-no-undef
  Line 11:  'brand' is not defined           no-undef
  Line 13:  'NavbarItem' is not defined      react/jsx-no-undef
  Line 14:  'Icon' is not defined            react/jsx-no-undef
...

Importing one by one seems to solve the problem, but doing 47 of them one by one is inefficient I'm asking because I don't think it's the right way.

import * from 'bloomer'; is there any way to use it together?

react

2022-09-22 19:37

1 Answers

If you look at mdn's import document (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import), you can use import in this way.

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";

There is no way to use import * from 'bloomer'; that the author asked, instead

import {member1, member2} from "module-name";

I recommend this way.

2022-09-22 19:37

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656