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

我在我的React项目中使用，并按照他们记录的示例创建表单。如果我理解正确，我只需要导入

表单

即可获得所有表单功能：

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>

我尝试导入行，但这无法解决错误。你知道少了什么吗

---

在我看来，他们的文档化示例不完整或不完整，或者我需要添加一些额外的导入来使用react bootstrap。

您应该从

react bootstrap

导入

行

、

列

和

表单

。有关JavaScript

imports

的更多信息，请参阅此

MDN

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

从“React”导入React；
从“react dom”导入react dom；
从“react bootstrap”导入{Col，Row，Form}；
函数App（）{
返回(
电子邮件
密码
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（是工作链接。
行
是组件的一个道具。您应该将
行
作为道具传递。实际上
行
是引导程序中的一个组件。哇，这很有效。谢谢！我在他们的文档中没有看到。它提到导入表单（“从'react bootstrap/Form'导入表单”）.但我想Col、Row等需要单独导入。他们在中导出了
表单
、
行
、
Col
等，但我不知道为什么文档没有更新。
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);