react-bootstrap 相关问题

我有一个带有的反应引导模式。我想在上设置自动对焦属性以下工作正常，但在控制台中显示警告我有一个带有 react-bootstrap 的 <input> 模态。我想在 <input> 上设置自动对焦属性以下工作正常，但在控制台中显示警告 <input type="text" autofocus='true' /> Warning: Invalid DOM property `autofocus`. Did you mean `autoFocus`? 以下选项不起作用，因为它们在打开模式时不会聚焦输入： <input type="text" autoFocus='true' /> <input type="text" autoFocus={true} /> <input type="text" autoFocus /> 建议的自动对焦设置方式是什么？或者我应该如何使效果良好的示例的警告静音？注意：这是react 16.8.6 如果您使用 React Hooks，请将 useCallback() 添加到您的组件，并将 ref={callback} 添加到表单控件： import React, { useCallback } from 'react' function InputComponent() { const autoFocus = useCallback(el => el ? el.focus() : null, []) return <input type="text" ref={autoFocus} /> } export default InputComponent 您也可以将 <input> 替换为 React Bootstrap FormControl。 Refs就是你想要的， constructor(props) { super(props); this.myRef = React.createRef(); } componentDidMount(){ this.myRef.current.focus(); } <input type="text" ref={this.myRef} /> 如果您正在使用反应钩子，您可以编写自己的简单自动聚焦钩子： import { useEffect, useState } from "react"; export const useAutoFocus = (inputId: string) => { const [initialized, setInitialized] = useState(false); useEffect(() => { if(!initialized) { document.getElementById("email").focus(); setInitialized(true); } }); }; 并且简单地使用例如 useAutoFocus("email") 以您的形式。为什么我开始输入时会出现错误？但如果没有自动对焦或其替代方案，我的代码就可以了。

javascript reactjs bootstrap-modal react-bootstrap autofocus

回答 4 投票 0

如何添加从单独的 CSS 文件获取样式的附加类？

我同时使用react-bootstrap和JSS，这可能不是最好的主意。但这就是事实。现在我正在尝试应用一些 Bootstrap 类，同时还使用 JS 应用样式...

html css reactjs react-bootstrap jss

回答 1 投票 0

React Native：意外显示<ul>或<li>

我正在使用 React 模板中的代码。我正在添加隐私页面。我的问题是，当我为项目符号列表添加 + 时：它不显示项目符号不添加剩余边距 c... 我正在使用 React 模板中的代码。我正在添加隐私页面。我的问题是，当我为项目符号列表添加<ul> + <li>时：它不显示项目符号不添加左边距更改字体大小和颜色显然，它必须来自全局CSS样式，但我不熟悉React也不熟悉bootstrap。我可以看到 styles.css、bootstrap.css 等文件。 bootstrap.css 很大，我可以看到这些行： ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; } .list-unstyled { padding-left: 0; list-style: none; } .list-inline { padding-left: 0; margin-left: -5px; list-style: none; } .list-inline > li { display: inline-block; padding-right: 5px; padding-left: 5px; } dl { margin-top: 0; margin-bottom: 20px; } dt, dd { line-height: 1.42857143; } dt { font-weight: bold; } dd { margin-left: 0; } 我不知道如何阅读。我的最终目标是拥有项目符号列表，其中包含项目符号和边距以及相同的字体，但也要了解决定网络最终渲染的因素。渲染风格：完整代码： import React from 'react'; import PageTitle from '../components/pagetitle/PageTitle'; const Privacy = (props) => { const liStyle = { marginLeft: 35, listStyleType: 'disc', // Setting list style type to 'disc' to show bullet points }; return ( <div> <PageTitle sub='Resources' title='Privacy Policy' /> <section className="tf-blog-detail"> <div className="tf-container"> <div className="row justify-content-center"> <div className="col-md-10"> <div className="detail-inner"> <div style={{ marginBottom: 100 }} className="content-top"> <h4 style={{ marginBottom: 15 }} className="title">Privacy Policy</h4> <span>Updated: February 06th, 2024</span> </div> <div className="content-inner"> <h5 style={{ marginTop: '30px', marginBottom: '10px' }}>3. Use of Information</h5> <p>Generally, we may use the information we collect to provide you with the best possible product and service, and continually improve them. Specifically, we may use your personal information as described in this Privacy Policy to ensure our services work properly, and for other research and commercial purposes. These purposes include, among other things, to:</p> <ul> <li>to provide, maintain, personalize, and improve our services and create a better experience for users in our application and with our services;</li> <li>to create user accounts and/or profiles through registration and import user contacts;</li> </ul> </div> </div> </div> </div> </div> </section> </div> ); } export default Privacy; Bootstrap 默认情况下不会删除任何列表项目符号点。如果您使用顺风预检 @tailwind base，默认情况下列表是无样式的 : 有序和无序列表默认情况下是无样式的，没有项目符号/数字，也没有边距或填充。正如 this tailwind github post 中所讨论的，一个最简单的解决方案是使用 @layer 覆盖包含 tailwind 预检的 CSS 文件中的预检样式： @tailwind base; @tailwind components; @tailwind utilities; /*overwrite tailwind preflight styles for ul, ol*/ @layer base { ul, ol { list-style: initial; margin: initial; padding: initial; } }

reactjs react-bootstrap

回答 1 投票 0

react-bootstrap 相关问题

最新问题