使用 React 将数据传递给自定义元素 Bootstrap

Question

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

{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。我该怎么做这个动作？有没有办法从 as={customCheckBox}

传递 item.cardId

Answer 1

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

使用 React 将数据传递给自定义元素 Bootstrap

Passing data to custom elements with React Bootstrap

javascript

reactjs

react-bootstrap

custom-element