reactjs - react-bootstrap 表单出现 "Row is not defined"错误

Question

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

2022 年更新:我更新了上面的示例链接，该示例已更改。有趣的是，例子还在only mentions导入 Form(从 'react-bootstrap/Form' 导入 Form)并忽略导入 Row 和 Col 的惊人需求。

Answer 1

您应该从 react-bootstrap 导入 Row、Col 和 Form。请参阅此 MDN link有关 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);

Here是工作链接。