javascript - 使用React Bootstrap将数据传递到自定义元素

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

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

 })}

我的customCheckBox在render方法中给出，如下所示

        const customCheckBox = React.forwardRef(
            () => {

                return (
                    <div class="custom-control custom-checkbox my-1 pl-0" >
                        <input type="checkbox" className="custom-control-input" id="" />
                        <label className="custom-control-label" for=""></label>
                    </div>
                );
            },
        );

我想将item.cardId传递给我的自定义元素，以便可以将item.cardId用作自定义元素中复选框输入的ID。
我该怎么做？有没有办法从item.cardId传递as={customCheckBox}

最佳答案

React-Bootstraps Form.Check和CheckInput组件未知的所有道具都将传递到您的customCheckBox组件。
尝试像cardId={item.cardId}这样的东西作为Form.Check的附加道具：

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