React-Bootstrap“找不到選項”

Question

嘗試在注冊表單中添加下拉菜單。

import React from 'react';
import { Form, Option } from 'react-bootstrap';

function Signup() {
  return (
                <Form>
                    <Form.Group className='mb-3' controlId='firstName'>
                        <Form.Label>First Name</Form.Label>
                        <Form.Control type='firstName' placeholder='First name' required />
                    </Form.Group>
                    <Form.Group className='mb-3' controlId='lastName'>
                        <Form.Label>Last Name</Form.Label>
                        <Form.Control type='firstName' placeholder='Last name' required />
                    </Form.Group>
                    <Form.Group className='mb-3' controlId='email'>
                        <Form.Label>Email</Form.Label>
                        <Form.Control type='email' placeholder='Email address' required />
                    </Form.Group>
                    <Form.Select aria-label='TeamSelect'>
                        <Option>Select your team</Option>
                        <Option value='1'>Team One</Option>
                        <Option value='2'>Team Two</Option>
                    </Form.Select>
                </Form>
  )
}

export default Signup

如果我保留它，那么我會收到一個錯誤

ERROR in ./src/components/pages/Signup.js 156:43-49
export 'Option' (imported as 'Option') was not found in 'react-bootstrap/Form' (possible exports: default)

但是如果我將“選項”排除在導入之外，那么我會收到一個未定義的錯誤。 我在這里想念什么？

編輯 1：我安裝了 react-bootstrap-select-dropdown 並且我不再收到“選項”缺失但頁面未加載（白屏）的錯誤。

Answer 1

帶有大寫“O”的“選項”用於 React-Native 但不在 ReactJS 中。 需要使用小寫的“o”作為“選項”才能使下拉菜單起作用。

          <Form.Select aria-label='TeamSelect'>
             <option>Select your team</Option>
             <option value='1'>Team One</Option>
             <option value='2'>Team Two</Option>
          </Form.Select>