react-bootstrap 表单获取“行未定义”错误

Question

我在我的 React 项目中使用react-bootstrap并按照他们记录的示例创建一个表单。如果我理解正确，我只需要导入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

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

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

Answer 1

你应该导入Row，Col并Form从react-bootstrap。有关 JavaScript 的更多信息，请参阅此MDN 链接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);

这是工作链接。