Question

我在我的React项目中使用react-bootstrap，并按照其记录在案的示例创建表单。如果我理解正确，则只需要导入form即可获得所有Form功能：

import Form from 'react-bootstrap/Form'

具体来说，我在跟踪this一个非常简单的示例：

<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

我尝试导入行，但是不能解决错误。任何想法缺少什么？

在我看来，他们记录的示例不完整或已损坏，或者我需要添加一些其他导入才能使用react-bootstrap。

Answer 1

您应该从Row导入Col，Form和react-bootstrap。有关JavaScript MDN的更多信息，请参考imports link。

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

Here是有效的链接。

react-bootstrap形式获取行未定义

1 个答案: