форма реакции-начальной загрузки не определена - PullRequest
Новая
       20

форма реакции-начальной загрузки не определена

0 голосов
/ 11 июня 2019

Я использую act-bootstrap в своем проекте React и следую их документированным примерам для создания формы.Если я правильно понимаю, мне нужно только импортировать form, чтобы получить все функциональные возможности формы: 

import Form from 'react-bootstrap/Form'

В частности, я следую этому довольно простому примеру: 

<Form>
  <Form.Group as={Row} controlId="formPlaintextEmail">
    <Form.Label column sm="2">
      Email
    </Form.Label>
    <Col sm="10">
      <Form.Control plaintext readOnly defaultValue="email@example.com" />
    </Col>
  </Form.Group>

  <Form.Group as={Row} controlId="formPlaintextPassword">
    <Form.Label column sm="2">
      Password
    </Form.Label>
    <Col sm="10">
      <Form.Control type="password" placeholder="Password" />
    </Col>
  </Form.Group>
</Form>

Однако в Chrome DevTools появляется следующая ошибка: 

MyComponent.jsx:430 Uncaught ReferenceError: Row is not defined

Я попытался импортировать строку, но это не устраняет ошибку.Есть идеи, чего не хватает?

Мне кажется, что или их задокументированный пример неполон или неработоспособен, или есть какой-то дополнительный импорт, который мне нужно добавить, чтобы использовать response-bootstrap.

1 Ответ

2 голосов
/ 11 июня 2019

Вы должны импортировать Row, Col и Form из react-bootstrap.Обратитесь к этой MDN ссылке для получения дополнительной информации о JavaScript imports. 

import React from "react";
import ReactDOM from "react-dom";
import { Col, Row, Form } from "react-bootstrap";

function App() {
  return (
    <Form>
      <Form.Group as={Row} controlId="formPlaintextEmail">
        <Form.Label column sm="2">
          Email
        </Form.Label>
        <Col sm="10">
          <Form.Control plaintext readOnly defaultValue="email@example.com" />
        </Col>
      </Form.Group>

      <Form.Group as={Row} controlId="formPlaintextPassword">
        <Form.Label column sm="2">
          Password
        </Form.Label>
        <Col sm="10">
          <Form.Control type="password" placeholder="Password" />
        </Col>
      </Form.Group>
    </Form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Здесь является рабочей ссылкой.

...