Получение «Тип элемента недопустим: ожидается строка (...)» при попытке использовать React-bootstrap InputGroup - PullRequest
Новая
       19

Получение «Тип элемента недопустим: ожидается строка (...)» при попытке использовать React-bootstrap InputGroup

0 голосов
/ 07 ноября 2019

Я пытаюсь использовать «InputGroup» из React-Bootstrap . Однако, когда я использую InputGroup.Prepend, я получаю сообщение об ошибке:

Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), нополучил: не определено. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

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

Вот мой "test.js" 

import React, { Component } from "react";
import { FormControl, InputGroup } from "react-bootstrap";


export default class Test extends Component {
    render() {
      return (
        <div className="Home">
            <InputGroup className="mb-3">
                <InputGroup.Prepend>
                    <InputGroup.Text id="basic-addon1">@</InputGroup.Text>
                </InputGroup.Prepend>
                <FormControl
                    placeholder="Username"
                    aria-label="Username"
                    aria-describedby="basic-addon1"
                />
                </InputGroup>
        </div>
      );
    }
}

И мой App.js 

import React, { useState, useEffect } from "react";
import { Auth } from "aws-amplify";
import { Link, withRouter } from "react-router-dom";
import { Nav, Navbar, NavItem } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
import Routes from "./Routes";
import "./App.css";

function App(props) {
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    }
    catch(e) {
      if (e !== 'No current user') {
        alert(e);
      }
    }
    setIsAuthenticating(false);
  }

  async function handleLogout() {
    await Auth.signOut();

    userHasAuthenticated(false);

    props.history.push("/login");
  }

  return (
    !isAuthenticating && (
      <div className="App container">
        <Navbar fluid collapseOnSelect>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="/">Scratch</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav pullRight>
              {isAuthenticated ? (
                <>
                  <LinkContainer to="/settings">
                    <NavItem>Settings</NavItem>
                  </LinkContainer>
                  <NavItem onClick={handleLogout}>Logout</NavItem>
                </>
              ) : (
                <>
                  <LinkContainer to="/signup">
                    <NavItem>Signup</NavItem>
                  </LinkContainer>
                  <LinkContainer to="/login">
                    <NavItem>Login</NavItem>
                  </LinkContainer>
                </>
              )}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Routes appProps={{ isAuthenticated, userHasAuthenticated }} />
      </div>
    )
  );
}

export default withRouter(App);

Что я делаю не так?

Спасибо.

1 Ответ

1 голос
/ 07 ноября 2019

Решением было использование документации для правильной версии Bootstrap, которую я использовал. Мне нужна была документация для Bootstrap V3 .

...