如何在 React-Bootstrap 中使用 React 组件作为 Form.Select 的选项

Question

我正在实施一个Form.Select ，它应该有另一个反应组件作为其选项。

在这里， Form.Select的名称是“Collection”，它的选项应该是一个名为“CollectionCard”的卡片组件（带有图像）。

这是预期的实施。 https://i.stack.imgur.com/8yWZ3.png （参考这张图片）

而且，这是我当前的代码。

<Form.Group controlId="form.collection">
    <Form.Label className="fw-bold">Collection</Form.Label>
    <Form.Select className="mb-5" aria-label="Collection">
        <option value="1">
            <CollectionCard />
        </option>
        <option value="2">
            <CollectionCard />
        </option>
    </Form.Select>
</Form.Group>

但这是上面代码在 UI 中实际显示的方式。 https://i.stack.imgur.com/eI8hv.png （参考这张图片）

“CollectionCard”组件未在Form.Select内呈现，它显示为[object Object] 。

更新后我也尝试为“CollectionCard”添加 {}，

<option value="2">
   {<CollectionCard />}
</option>

还是行不通。

更新了下面的添加 CollectionCard 组件代码。

import React from 'react';

import './CollectionCard.scss';

import {Card} from 'react-bootstrap';

export const CollectionCard: React.FC = (props) => {
    return (
        <div className="collection-card">
            <Card className="d-flex flex-row border-0 bg-transparent">
                <Card.Img className="card-img-xs" src={require('../../../../assets/nft-sample.png')} alt="img" />
                <Card.Body className="p-0 ms-3 align-self-center">
                    Lorep Ipsum
                </Card.Body>
            </Card>
        </div>
    )
}

请帮我解决这个问题。 谢谢！

Answer 1

只需将您的组件设置在括号内

<Form.Group controlId="form.collection">
<Form.Label className="fw-bold">Collection</Form.Label>
<Form.Select className="mb-5" aria-label="Collection">
    <option value="1">
        {<CollectionCard />}
    </option>
    <option value="2">
        {<CollectionCard />}
    </option>
</Form.Select>
</Form.Group>