我已经开始通过flummox使用react、react引导和react路由器。我正在尝试为我的网站创建一个基本的同构CMS 上下文： 在身份验证方面，每个用户都有一个功能列表，每个组件都使用我的身份验证存储的方法“可以”显示或不显示，等等 我在上面有一个用户导航栏，在RET路由器处理的每个页面上都可以看到，带有一个登录/退出按钮，如果用户没有登录，基本上会在点击模式时显示一个登录表单，否则会显示一个注销确认 当用户登录时，我希望更新页面上当前显示的组件（与注销相同） 以下是一个页面示例，该页面显

我试图让redux传奇与onmessage侦听器一起工作。我不知道为什么我的东西不起作用 我有以下设置 // sagas.js import { take, put } from 'redux-saga'; import {transactions} from "./actions"; function* foo (txs) { console.log("yielding"); // appears in console yield put(transactions(txs)

我需要在13分钟不活动后显示超时警告模式，如果用户不采取任何行动，则在15分钟后结束会话。我需要使用reactjs实现这一点。我检查了反应超时，但没有帮助。 如果有人知道这样做的方法，请与我分享。您可以创建这样的高阶组件，并可以通过高阶组件传递子组件 特设： `//代码 export default function(ComposedClass) { class AutoLogout extends React.Component { constructor(props) {

我正在调用react组件中的函数 <button onClick={this.createComment}>Submit Comment</button> 我需要在createComment函数中调用this.setState。 如何使this成为组件的this？？？更改此项： onClick={this.createComment} 到 或 注: 正如@rafahoro评论的那样： 您应该更喜欢在构造函数上绑定“this”： constructor() {

我试图在非路由组件上获取有关当前路由的信息 React Router提供单例版本的历史记录（browserHistory 和hashHistory），您可以从计算机中的任何位置导入和使用 应用程序 以前，您似乎可以使用browserHistory，但现在似乎不再支持。我正在使用react-router-redux^4.0.8和@types\react-router-redux^5.0.1 如何访问当前路线位置？这非常简单。您可以使用HOC 您可以访问历史对象的属性和最近的 通过与路由器高阶组件路

我想知道如何正确地将路由器链接添加到MaterialUI AppBar演示中 我对react是新手，我的第一个猜测是做导航程序Maticali（例如在click handler中），但react路由器似乎不是这样工作的 关于您可以通过在事件处理程序中使用this.props.history.push（'/My/Route'）以编程方式执行此操作！如果您没有访问历史记录道具的权限，则在使用React Router包中的WithRouter组件对组件进行处理后，将其导出。示例：使用路由器导出默认值

大家好，我正在处理react应用程序，当我启动它时，它会显示这种类型的错误 我和dnd一起工作 你能帮助我吗？先谢谢你 这是我的package.json { "name": "dndexercice", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.3.1", "react-dnd": "^2.6.0", "react-dnd

当用户试图重定向到我发送自的专用路由时：props.location，以便用户登录后重定向回同一链接 但当用户直接登录页面时，它会显示 私人路线 <Redirect to={{ pathname: '/sign-in', state: { from: props.location} }} /> 它给了我这个错误 TypeError:无法读取未定义的属性'from'此.props.location.state仅在从重定向装入组件时才会存在，因此您需要在访问它之前先检查它是否存在： i

我正在创建一个利用谷歌地图的网站，我得到了一堆未定义的错误。我是react/js world的新手，因此非常感谢您的帮助。以下是确切的错误： Failed to compile. ./src/App.js Line 23: 'lifecycle' is not defined no-undef Line 25: 'google' is not defined no-undef Line 28: 'google' is not defined no-undef

我已经在我的应用程序中插入了redux persist。当应用程序被终止后重新启动时，think Id想做的第一件事是在重新水化的存储中获取我的身份验证令牌，并检查令牌是否仍然有效 我正在努力寻找好的策略来做到这一点。作为第一个直觉，我会尝试在componentDidMount方法的根应用程序组件中这样做。以下是我的组件： export default class App extends React.Component { componentDidMount(){ console.l

使用React-dev工具和探查器，是否有方法启动探查器并重新加载页面？类似于Chrome开发工具的启动分析和重新加载页面的按钮 当前，如果我启动探查器并刷新页面，它将停止探查器。我不知道您是否可以点击记录并重新加载页面，但如果您想测量页面负载，我认为您可以将探查器放入代码中，然后控制台记录结果。大概是这样的： logProfile = (id, phase, actualTime, baseTime, startTime, commitTime, interactions) => {

我在react应用程序中使用了formik库。最初，我在构造函数中声明了状态值，在componentDidMount中，我正在调用一个API，应用程序响应正在更新状态值，有人能帮我将状态值传递给fomik初始值吗 在我的情况下，formik将获取构造函数中声明的初始状态值。提前感谢 class Dropdown extends Component { constructor(props) { super(props); this.

我正在尝试将图标添加到我的react navigation示例中，我在reactnavigation.org上找到了该示例： 即使这个实现似乎也不能正常工作，因为设置选项卡在图标未选中时会显示一个问号。这里有一个小吃可以证明这一点： 我怎样才能更改代码，使问号永远不会出现？你做得很好！：）问题实际上是与文档有关。当Settings不在focus中时，您看到问号的原因是图标ios选项大纲不存在！以下是文档示例： if (routeName === 'Home') {

我想使用浏览器路由和react router dom路由通过应用程序中的react组件进行路由，但出现错误 错误： Line 44: Parsing error: Unterminated JSX contents 42 | <Route path='/edit' component={EditExpensePage} /> 43 | </div> > 44 | </BrowserRouter&

我正在运行一个带有react-16.8.6的create-react应用程序，除了将react-router添加到混合中之外，没有任何修改。现在测试不起作用了 在回滚之后，我发现只要导入“react router dom”库的任何部分，基本测试就会失败。你知道怎么回事吗 下面是我在注释该行时的App.js和App.test.js： import { Switch } from "react-router-dom"; 测试运行时没有问题。当我将该行返回到代码时，会出现以下错误： 测试套件无法运行

我不熟悉React Bootstrap，但一直在努力遵守官方文档，例如： 在一个模式中，我通过Form.Control方法添加了inputtextbox和textareatextbox。那很好 奇怪的是，从onInput事件处理程序返回的数据对于每个事件都是不同的。第一个是纯粹的角色。第二个是引号中的字符 这不是一个大问题，但我很好奇这是故意的行为还是一个已知的bug，因为它们不应该都在引号中吗 <Form.Control id='companyName' d

我正在用jest和TypeMoq开发React应用程序 当模拟调用是对象上需要未定义的方法时，我无法测试决策树的负路径。TypeMoq上是否有一个方法可以帮助我验证未调用提供的方法 键入TopicComponentProps={ 主题：主题 历史？：历史 } export const TopicComponent=（{topic，history}:TopicComponentProps）=>{ const{Id，Name}=topic； 常数filterTopic=（）=>{ 如果（历史）{//

我正在从后端获取一些数据，处理获取的消息数组，并通过Redux进行设置，同时执行Navigation.push（）。注意，由于render是由于Redux调用而被调用的，所以它会在控制台上抛出一个关于卸载组件时状态更改的警告，因为发生这种情况时它已经在渲染新屏幕 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak

我希望有人能在这个例子中向我解释React hook的正确用法，因为我似乎无法找到它 下面是我的代码 useEffect(() => { _getUsers() }, [page, perPage, order, type]) // This is a trick so that the debounce doesn't run on initial page load // we use a ref, and set it to true, then set

我有这些对象，我在它们后面附加了一个图像URL，然而，当我试图调用该URL以便验证它是否有效时，它不会出现。其他每个属性，不管是“id”，都会打印出“name”，但URL不会打印出来 当我键入以下代码时： {trendingMovies.map（（movie）=>）} 我得到以下结果： 但在我尝试打印出其他属性之后 {trendingMovies.map（（movie）=>{movie.original_title}）} 我得到了需要的结果 最后，我将附加另一个图像，以便您看到我正在处理的内容

我正在尝试开发KonvaJs的示例： 克隆存储库后，一切正常。然而，一旦我将mobx从4.3.1更新到5.15.0，它就会给出这个错误 错误：MobX注入器：存储“存储”不可用！确保它是由某个提供商提供的 有人能帮我解决这个问题吗。 谢谢。看起来mobx-react正在使用react上下文将store传递给组件 但React上下文不会自动用于自定义React渲染器（如React konva）。有关更多信息，请参阅： 作为解决方法，您只需在组件中“桥接”存储： { this.stageRef=re

在我的render中，我触发了一个函数，将用户重定向到另一个页面，但在现有状态转换期间（例如在render内）出现了一个错误无法更新 我注意到，如果我将redirectToPath函数（在render中）放在setTimeout中，它允许状态完成转换，并且错误消失。如果我将history.push（path）和setState（在redirectToPath中）放在setTimeout中，它也可以工作。我如何重构它，这样就不会与状态转换发生冲突 componentDidMount() { let

虽然我可以理解你可以建立反应组件，如按钮，列表。。。 一些ppl建议也创建页面组件 这让我感到困惑，因为对我来说，页面位于这些UI组件（按钮、列表等）的顶部，所以它使用这些组件。 那么，将页面本身作为一个组件有什么好处呢？页面组件允许您在单页应用程序中实现类似导航的行为，而无需刷新文档。好的，这是一个SPA组件，很有意义。顺便问一下，有人推荐一些SPA组件的好示例吗？谢谢！页面组件允许您在单页应用程序中实现类似导航的行为，而无需文档刷新OK，因此它是一个SPA组件，很有意义。顺便问一下，有人推荐

我最近刚开始使用Redux，并使用以下代码将我的组件连接到应用商店： const mapStateToProps = state => ({ ...state, }); const mapDispatchToProps = dispatch => ({ writeSomething: () => dispatch(writeSomething), }); export default connect(mapStateToProps, mapDispatchT

我目前正在尝试react native上的redux操作创建者，我在尝试验证用户身份时遇到此错误 export function authenticate(email, password) { return (dispatch) => { dispatch(request()); fetch(path + '/api/v1/account/authenticate', { method: 'POST', headers: { 'Accept': 'application/json'

我正在创建一个简单的博客文章项目，当我在文章的描述或正文中添加链接时，它是这样创建的[text]（#） 在ReactJS中使用axios.get和控制台日志记录请求上述文章时，响应将获得[text]（#） 如何将[文本]（#）更改为您需要使用标记到HTML库来转换它。我认为这取决于您使用的转换器。也许您的转换器上有一个特性，可以让您在DOM元素中添加自定义类

我在react组件中有一个表单 当我单击submit按钮时，我调用signin（）。在signin（）中，当我可以在chrome控制台中看到输出时发生错误，但它闪烁得太快，我无法读取。然后页面刷新，错误消息从控制台消失 为什么我的表单要重新呈现页面？如何抑制重新渲染以便读取错误 以下是我的组件： import React, { Component } from 'react'; import './login.scss'; import axios from '../axios/axiosIns

目前，我有一个使用redux的应用程序，我将其设置为每次加载应用程序时都检查JWT令牌是否有效，并将用户数据添加到状态 我想知道调用api，然后在每次重新加载时将数据存储在状态中，或者在localStorage中存储一次数据，两者之间有什么区别 如何通过调用api和使用redux存储来设置代码 支票代币 const token = localStorage.UserIdToken; if (token) { const decodedToken = jwtDecode(token);

我的React应用程序中有一个Buton组件。我希望按钮能聚焦 我认为“focusRipple=“true”应该可以工作，但它不会改变任何事情 --index.js-- 感谢您的帮助。尝试添加autoFocus={true}或只添加autoFocus@bsapaka谢谢。是的，效果很好。但是你知道为什么没有写在文档中吗？这是原生HTMLtry的属性，添加了autoFocus={true}或者只是autoFocus@bsapaka谢谢。是的，效果很好。但是你知道为什么文档中没有写这个吗？它是

我有这样的结构： <users admin component> <user list component> <new user form component> </users admin component> 我没有使用任何类型的全局状态管理（即redux），如果可能的话，我希望避免使用它。我使用钩子来管理每个组件上的状态 我想做的是在表单组件中POST调用成功时更新用户列表组件（GET） 实现这一目标的最佳方式是什么？以某种

我在代码中创建了一个类组件 index.js import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import * as serviceWorker from "./serviceWorker"; import Home from "./components/home"; ReactDOM.render( <React.StrictMode> <Hom

我有一个图像链接数组。如果我在src中循环它，我只得到第一张图像。我尝试了map（）和for loop。它们都只显示第一个图像 for (let i = 0; i < screenshotList.length; i++) { return ( <> <img src={screenshotList[i]}

我正在尝试在react typescript中创建布局元素。我试图有一个布尔道具，将决定是否渲染页脚或不。不幸的是，我得到了一个未定义问题的无法读取属性。我还想为道具类型设置一个默认的真值。我是个新的反应者，仍然在努力学习细节 import React, { Component } from 'react' import Scrollbar from 'react-smooth-scrollbar' import Header from '../Header/index' import Foot

我想从另一个组件中的按钮单击事件中清除一个组件中的用户输入数据。 组件结构如下所示： Search (contains Reset button) | Tabs | ------------------ |

假设我有一个呈现列表项的组件： const ListItem = ({ itemName }) => { return ( <div> {itemName} </div> ) } const ListItem=（{itemName}）=>{ 返回( {itemName} ) } 由于此列表项在我的应用程序中的许多地方都使用，因此我定义了一个自定义挂钩来呈现列表并控制每个列表实例的行为： const useListItems =

结果类型prop的定义如下。CalendarProp，ContactProp，。。。都是预定义的，并且都有不同的类型 type ResultProp = | { type: "calendar", data: CalendarProp } | { type: "contact", data: ContactProp } | { type: "dropbox", data: DropboxProp } |

我想知道是否有人已经成功地在引导模式中编辑了文本，并可以分享一些智慧。当用户单击任务标题时，我使用引导反应模式来显示数据。数据显示得很漂亮，但用户无法编辑数据。光标将变为编辑光标，但无论键盘敲击多少，都无法进行编辑。我尝试添加一个引导反应表单，如下所示。当我点击“保存更改”按钮时，我得到了toastify错误 import React, { useState } from "react"; import Button from "react-bootstrap/Bu

我需要一些使用TextInput react native的帮助 我试图实现的是，当用户开始在表单字段中键入时，我需要在TextInput中附加“月”文本。如果您查看下面的屏幕截图，查看任期和付费EMI，值分别为123和12。我需要得到像这样的“123个月”和“12个月”动态月应添加到用户输入的值 例如，如果用户键入2，则应显示为“2个月”；如果用户删除2，则默认占位符文本应显示为“36个月” 更重要的是，“月”应该是不可编辑的，用户应该只能输入或更新数值。例如：如果TextInput中的值为“

有没有办法在React中选择持续时间？这样，我必须选择小时、分钟和秒。有易于使用的库吗

当我单击导入时，如果使用未命名的默认导出，则无法转到组件的定义。当我进行命名导出时，它会工作 src/components/Component/Component.js // When i cmd/ctrl click here it should go to OtherComponent.js but it doesn't work import OtherComponent from 'components/OtherComponent'; const Component = () =&g

我和图书馆的marmelab React管理员有问题 我正在使用我的公司构建的Api来获取数据并将其查看到列表中。Api支持分页查询，它在Postman上运行得很好。但在我的应用程序中，当我按下“下一步”或任何其他页面时，列表上没有任何变化。即使我点击过滤器，也没有任何变化 有人能帮我吗 谢谢请添加更多详细信息：您正在使用的数据提供程序，您的API需要哪些参数进行分页和筛选。另外，请在该列表中显示您正在执行的操作。

我使用的是react表v7。我已经将排序添加到我的表中，尽管排序具有这样的行为，即当第三次单击标题时，排序被删除。我希望在排序应用于标题后切换排序，例如，如果我单击标题，现在它被排序为升序，然后第二次单击到降序，然后第三次单击返回到降序，依此类推。只有在单击其他标题时，才应删除排序 下面是代码片段 import React from 'react' import { useSortBy, useTable } from 'react-table' const Grid = (props) =&

我正在尝试在我的Ionic React项目中添加一个全局导航/菜单栏组件，就像您在任何网站上所做的那样 因此，我创建了一个标准的组件，但似乎我只能将其添加到我的Ionic应用程序的特定页面中，而不能添加到设置路由器的app.tsx文件中 我的App.tsx组件如下所示： const App: React.FC = () => ( <IonApp> <IonReactRouter> <IonRouterOutlet>

我试图用typescript创建react应用程序，但JSX和TS似乎有问题。我读了一些可能的解决方案，但都不适合我 我有： npm:16.14.7版 节点：版本14.8.0 我使用了 安装进行得很顺利，但当我尝试运行npm start时，它会出现以下错误： > my-app@0.1.0 start /Users/lukasbenediktson/Desktop/react-types/my-app > react-scripts start /Users/lukasbened

我有一个带有复选框的项目列表，这些复选框是我从antd导入的，它们在除Safari 14之外的所有浏览器上正常工作（在Safari 13上正常工作）。 看起来部分复选框未呈现。如果我点击到它应该在的地方，复选框就会出现

我试图使用React table中的基本表示例，但是当我运行应用程序时，需要加载表的服务器页面抛出了一个错误TypeError:Object（…）不是函数 导入 django_data.json [ { "id":"CEB4FD81E47A01F6AF51E4115B9A6514", "url": "http://example.com/api/v1/servers/9689/", "

我正在使用电子邮件客户端，我正在从gmail获取电子邮件。当我使用打印页面上的电子邮件内容时 <div dangerouslySetInnerHTML={{ __html: body.content }} /> 它工作得很好，但正如您所知，电子邮件附带了内联css，这会影响我的页面UI、字体大小变化、div缩小/扩展 为了克服这个问题，我使用了Iframe，并将电子邮件内容打印到Iframe，这解决了我的问题，但我注意到，如果我将电子邮件打印到Iframe，电子邮件本身就失去了

在react-usestate钩子的帮助下，更新电子邮件和密码react-Control后，我的allentry.map功能将不起作用 import React, { useState } from 'react' const App = () => { const [email,setemail ] = useState() const [password,setpassword ] = useState() const [allentry,setallent

根据本文：我添加了一个docker构建步骤，这是一个成功 docker构建： 阶段：docker build 图片：docker:最新 变量： 公共URL:https:// 服务： -姓名：docker:dind 在脚本之前： -echo$CI_BUILD_TOKEN | docker login-u“$CI_REGISTRY_USER”--密码stdin$CI_REGISTRY 脚本： -docker构建——pull-t“$CI\u REGISTRY\u IMAGE”。 -docker推送“$

我有一个表示表单字段的数组fields。这些字段是受控的，它们的值存储在表单中 const [fields, setFields] = useState([]) const [form, setForm] = useState({}) ... fields.map(function(element, index) { return <input name={'field '+element} key={index} /> }) 我还可以删除字段： setFields(fun