Javascript 使用React引导将数据传递给自定义元素

我有一个自定义样式的复选框，该复选框包含在一组映射数据数组中

{nfcArray && nfcArray.map((item, key) => {
     return (
          <tr class="hover">
             <td className="cell_style pl-3 pl-lg-5">
                <Row noGutters>
                    <Form.Check
                       required
                       name={item.cardId}
                       id={item.cardId}
                       as={customCheckBox}
                    />

                    <label>{item.cardId}</label>
                </Row>
            </td>
            <td className="cell_style pl-3 pl-lg-5">{item.name}</td>
          </tr>
      )

 })}

我想将

item.cardd

传递给我的自定义元素，这样我就可以使用

item.cardd

作为自定义元素中复选框输入的id。

---

我怎样做这个动作？是否有方法将

项传递给
as={customCheckBox}
中的carid

任何对引导

表单反应未知的道具。Check

和

CheckInput

组件将传递给您的

customCheckBox

组件。 尝试类似于

cardId={item.cardId}

的方法作为

表单的附加道具。检查

：

<Form.Check
   required
   name={item.cardId}
   id={item.cardId}
   as={customCheckBox}
   cardId={item.cardId} />

const customCheckBox=React.forwardRef（（道具）=>{
返回(
);
});

我应该将cardId={item.cardId}添加到哪里，以及如何从customCheckBox中读取它

<Form.Check
   required
   name={item.cardId}
   id={item.cardId}
   as={customCheckBox}
   cardId={item.cardId} />

const customCheckBox = React.forwardRef((props) => {
    return (
        <div class="custom-control custom-checkbox my-1 pl-0" >
        <input type="checkbox" className="custom-control-input" id={props.cardId} />
        <label className="custom-control-label" for=""></label>
        </div>
    );
});