react-bootstrap 相关问题

我正在使用react-bootstrap中的Accordian，我希望可以扩展表行以查看另一个表，它工作正常，但在浏览器控制台上给我警告。我正在使用react-bootstrap中的Accordian，我希望表行可以扩展以查看另一个表，它工作正常，但在浏览器控制台上给我警告。 <div className="row me-2 ms-2"> <table className="table accordian-table table header-fixed border mt-2"> <thead> <tr> <th width="30%" className="text-center">Col 1</th> <th width="30%" className="text-center">Col 2</th> <th width="30%" className="text-center">Col 3</th> <th width="25px" className="float end"></th> </tr> </thead> <tbody className="scroll"> <Accordion activeKey={activeAccordionKey} onSelect={(selectedKey) => setActiveAccordionKey(selectedKey)} flush> { (items?.length) ? [...items].map((item, index) => { return ( <tr key={index} onClick={() => getFlows(item)}> <Accordion.Item eventKey={index}> <Accordion.Header className="main-table-content"> <td width="30%" title={item.prop1} className="text-center pt-2"> {item.prop1} </td> <td width="30%" title={item.prop2} className="text-center pt-2"> {item.onboardingInfo.prop2} </td> <td width="30%" title={item.prop3} className="text-center pt-2"> {item.onboardingInfo.prop3} </td> <td width="25px">{" "}</td> </Accordion.Header> <Accordion.Body> <table className="table" onClick={(e) => e.stopPropagation()}> <thead> <tr> <th>Flow Name</th> <th>Flow Type</th> <th>Dnid</th> <th>Ext</th> <th>Created By</th> <th>Created On</th> </tr> </thead> <tbody> { (selectedItem?.length) ? [...selectedItem.values()].map((slItem) => { return ( <tr key={slItem.flowName}> <td>{slItem.flowName}</td> <td>{slItem.flowTypeId}</td> <td>{slItem.dnid}</td> <td>{slItem.createdBy}</td> <td>{slItem.createdOn}</td> </tr> ) }) : <tr><td>No Configs Available</td></tr> } </tbody> </table> </Accordion.Body> </Accordion.Item > </tr> ) }) : <tr><td>No ItemsFound</td></tr> } </Accordion> </tbody> </table> </div> 它在浏览器控制台中向我发出以下警告：警告：validateDOMNesting(...)：不能作为 . 的子项出现有人可以帮我删除这个，或任何其他替代方法吗？ HTML 表格的正确结构是： <table> <tbody> // optional <tr> // row <td>anything can be here</td> <td>another cell</td> </tr> ... </tbody> </table> 因此tr（行）只能包含td（数据）元素。

javascript reactjs accordion react-bootstrap mern

回答 1 投票 0

使用 Typescript 进行 React 和 Google 自动完成

我有一个谷歌地址自动完成和一个react-bootstrap表单，我无法使类型与参考匹配。类 ProfileForm 扩展了 React.Component {

reactjs typescript google-api react-bootstrap

回答 1 投票 0

React Bootstrap 全屏道具不起作用

描述错误将 fullscreen 属性添加到 Modal 并不会使 Modal 变成全屏。可重复的例子使用 CodeSandbox 的最小示例。预期行为模式为全屏。

javascript reactjs react-bootstrap

回答 4 投票 0

如何将函数附加到 React Bootstrap 上的 Dropdown.Toggle？

我试图在单击 React Bootstrap Dropdown.Toggle 时执行一个函数。我尝试添加 onClick 如下所示，但这完全破坏了下拉功能并且不显示...