我正在尝试使用react js创建自己的自定义面包屑路径组件。我对你很熟悉。但我不清楚该怎么做。。（特别是面包屑小道）。有人能给我一些与此相关的示例或教程吗？我认为最好的方法是安装react router 然后，您可以很容易地通过在彼此之间嵌套路由，然后使用它提供的一些实用功能来获取当前路由。我还没有使用最新版本的react路由器。但旧版本是这样做的： var currentRoutes=this.context.router.getCurrentRoutes（） 这用于为您提供一个包含所有

Rudx thunk在调度异步操作方面做得很好，它最终将修改异步操作中获取的状态。但是我怎么知道它最终修改获取的redux状态的时刻呢 在我的例子中，我想从服务器读取配置，因为有些组件需要这些配置，所以我必须在获取配置后呈现整个应用程序。但到目前为止，我无法通过使用redux thunk或任何其他redux异步中间件来解决这个问题 更新#1显示一些代码以更好地表达自己。 // reducer (state, action) => Object.assign({}, state, {conf

是否可以在不使用日期选择器的情况下使用日期选择器对话框？我之所以要这样做，是因为我希望对现有数据的格式进行更多的控制，而不是DatePicker中的TextField所允许的控制 我试过了，这就是我得到的，所有的日期都是乱七八糟的： 这是我的密码： <MuiThemeProvider> <div> <span onClick={this.handleClick}>Open</span> <DatePicke

th标记下的名称和产品已渲染，但的循环未渲染..但我可以在console中看到值。nad不会引发任何错误…请执行以下操作： <tr> <th>name</th> <th>productID</th> {this.state.product[0].customCoulmns.forEach(function (columnhead) { console.log("columnhead lolzz ",col

我很难设置JSC来使用JSX/React和ES6（阶段0）。它抛出了这样的错误： Expected end of node list but "Punctuator" found at ./src/base/react/architecture/components/Dummy.component.jsx : 1 |import React, { PropTypes, Component } from 'react'; --------^ 及 我既无法修复它，也无法找到问题的原因 我

我只是想知道我是否有一个组件，当状态改变时，所有生命周期方法都被调用了？ 另外一个问题是当我有两个组件时，当父状态被更新时，所有生命周期方法都会被父和子调用。 此问题主要是为了消除我对ComponentWillReceiveProp和Update lifecycle方法的混淆。无论何时调用setState，都会调用以下函数： shouldComponentUpdate 如果返回true 组件将更新 渲染 componentdiddupdate 如果shouldComponentUpdat

我是个新手，但我正在尝试将元素从课程组件传递到我的教材盒组件。我正在成功地执行此操作，但按钮正在显示，因为我没有通过此.prompt。我想从HTML中删除div id=“course”，因为我只希望couresebox组件中显示课程组件 这是我的JSX代码 class Course extends React.Component { render() { return ( <div className="course"> <h3>{this.props.cour

如果您使用摩卡+酶对一个反应组分进行单元测试，并且该组分的单元测试包括测试道具，是否可以安全地说为该组分定义propTypes是不必要的？否，因为propTypes可以在开发人员模式下抛出警告，通知其他开发人员可能缺少的道具或道具类型差异 propTypes的目的并没有因为围绕它的单元测试而减轻。我们也不要忘记，随着应用程序的发展和越来越多的人参与进来，他们可能会忘记他们的单元测试，然后我们就失去了propTypes提供的的好处。不，因为propTypes可以在开发人员模式下发出警告，通知其他开

我有一个非常简单的问题，关于重用组件的html包装。但我不确定什么是“正确”的方法 我想呈现一系列组件，对每个组件重用相同的（复杂的）html包装器。然后在包装器中呈现一组不同的子组件 (render 10 of these:) <div i start> <div start reusable wrapper> <child component - one of ten different components, one after th

我是新来的。我想在我的项目中使用ReactJS AdminLTE。谁能告诉我如何使用它的一步一步的过程 我遵循的步骤 1） 我使用教程设置了Reactjs环境 2） 然后我使用命令npm install AdminLTE ReactJS安装ReactJS AdminLTE 我的webpack.config文件是 var path=require('path'); var config = { entry: './main.js', output: { path: pat

我是新来的。我有一个react+react router+redux应用程序，我想从子组件发出调度呼叫。现在，调度正在应用程序最顶端的my index.js文件中进行，它通过redux thunk操作和api调用从数据库加载所有数据： const store = configureStore(); store.dispatch(loadCourses()); <-- redux thunk function calling api store.dispatch(loadAuthors())

我有一个任务组件，它返回其他组件。但是，当我从Tasks组件更改子组件之一的状态时，它不会重新渲染 我将“newTaskAdded”状态作为道具从父级传递给子级，并将其分配给子级状态，以便重新渲染子组件，但它仍然没有发生 我的目标是： 当用户添加任务时，我希望它立即显示在屏幕上，这意味着用户必须刷新页面才能看到新任务 Tasks.jsx： import React , { Component } from 'react' import axios from 'axios' import Name

我是新手。我对React路由器v4有问题，需要你们的建议。 在我的应用程序（React+Redux）中，我正在配置我的路由： /app/:appId/detail /app/:appId/config/:store /app/:appId/gifts 并同时渲染两个组件。A选择组件（允许更改appId）和主组件（显示数据） 假设我在/app/1/detail中，appId为1，并显示来自应用程序1的详细信息。当我按下将应用程序更改为2时，我想更改我的url，如/app/2/detail，并在指

我正在尝试通过令牌ID从Firebase控制台向我的ios设备发送推送通知。我正在使用react native Firebase允许应用程序根据通知事件执行操作。我按照说明集成SDK，并设置了APNS证书等： 我的firebase.jsconfig文件如下所示： import RNFirebase from 'react-native-firebase'; const configurationOptions = { debug: true }; const firebase = RN

我是react redux新手，在理解语法方面有一些困难。我正在下面粘贴我的示例代码。。。如果有语法错误，请帮助我理解 SampleParent.js: import React, { Component } from 'react' import { connect } from 'react-redux' import { fetchNames, fetchDownloadLink } from '../../actions/actions' import SampleChild from

尝试将我的rn项目升级为react native:0.49.0-rc.5和Ezyme 3，所有测试都可以正常工作，但babel在运行packager时会抛出转换错误 这就是错误所在 绑定失败：错误：require（）必须具有单个字符串文字参数 关于堆栈： “react”：“^16.0.0-beta.5”， “react native”：“^0.49.0-rc.5”， “酶”：“^3.0.0” 及 节点：8.5使用React 0.49.0-rc.5，他们更新了metro捆绑程序，该捆绑程序不支持动

我刚刚开始学习react，我想知道构建一个测试项目的最佳方法是什么 应用程序只有一页，并且必须： 有一个点击外部API的搜索，返回JSON JSON结果将以可读的格式显示给用户 有动态链接的按钮 有一个包含一些json数据的下拉列表 我认为每个组件都应该有一个组件，关联设置为“搜索”作为父组件，其他每个组件都直接从父组件继承 例如： app │   ├── search component │   │   ├── dropdown component │   │   ├── list com

我想创建一个新组件，其中包含aor中的输入和字段，并在和中使用它，如下所示： const WrapperComp = () => { return ( <div> <TextFieldLabel muiTheme={muiTheme}>Title Example</TextFieldLabel>, <TextInput source="status"/>, <TextField sourc

我用所需的单个websocket连接来响应应用程序，因此我从redux操作连接websocket，并尝试将websocket实例设置为prop；因此，我可以访问我的应用程序中的任何软件的这个实例 const initWebSocket = uri => { const ws = new WebSocket(uri) return { type: WEB_SOCKET_CONNECTION_SUCCESS, ws } } // redu

我已更新状态，但无法检索特定键的值 . 我想打印用户添加的结果 从“React”导入React； 从“redux form”导入{Field，reduxForm}； 从“../actions/index”导入{addUser}； 从“物料界面/平面按钮”导入平面按钮； 从'react redux'导入{connect}； 从“物料界面/文本字段”导入文本字段； 从“材料ui/RadioButton”导入{RadioButtonGroup，RadioButton}； 从“./User\u添加结果”

我正在开发一个应用程序，它调用Unsplash的API并显示响应。当我在componentDidMount（）中有fetch请求时，我能够通过/photos端点轻松获取/显示响应，但我想使应用程序可搜索，因此我添加了带有默认查询的performSearch（） 但是添加performSearch会导致此错误： 这是我测试时得到的JSON： 我尝试过论坛上找到的其他解决方案，但到目前为止还没有解决问题。我肯定会得到一个数组，所以map不应该工作吗 类应用程序扩展组件{ 构造函数（）{ 超级（

我们有如下的对象数组 const obj = { 1: [{ row: 1, name: 'file1' }, { row: 1, name: 'file2' }], 2: [{ row: 2, name: 'file3' }] } 基于上面的元素，我想生成如下的react组件 <React.Fragment> <h2>Elment: 1</h2> <div&g

我来自jQuery，因此在理解如何进行这项工作时遇到了一些问题 我正在用React编写一个应用程序，并使用内联样式，即每个组件都有自己的样式，它们是用JS而不是CSS编写的 现在，我有五个选项卡，我想在单击其中一个选项卡时切换一个处于活动状态的。因此，在单击时，我必须从旧类中删除处于活动状态的，并将其添加到单击的类中。我不知道如何使用inline样式来实现这一点，因为一切都是inline的，没有实际的类可以添加到我的选项卡中 现在，当我渲染每个选项卡（我将其作为一个单独的组件）时，我还传入一个i

我正在尝试从部署的react应用程序（AWS S3 CDN）对grails应用程序上的资源进行rest调用 React应用程序具有ULR CORS配置与AWS上的配置相同，当然除了example.com <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <Allo

如果加载了数据，我想呈现html元素 render() { return ( <div> ... { this.state.isLoaded ? ( <ReviewShortIntro review={this.state.mainReview} /> <div className="clear" /> <div className="section-title"&

按钮函数的绑定 export default class GameControls extends React.Componentconstructor(props) { super(props); this.state = { x: 0, y: 0 }; 按钮的功能 this.left = this.left.bind(this);

我有一个子组件，它有一个文本输入字段，该字段的值应该用父组件的props初始化（this.props.index） 这应该是受控输入，因为我希望能够存储输入的文本 现在，如果我将该值设置为state的属性，则无论何时重新渲染组件，它都不会更新，因为setState从未被调用： <input type={"text"} placeholder={"Index"} className={"form-control"} value={this.sta

我正在用React和TypeScript编写表单组件。我使用Formik作为表单逻辑。我想将组件作为道具传递给特定的表单，并对其进行渲染。以下是我尝试过的： import { Formik, FormikProps } from "formik"; import React, { PureComponent, ReactNode } from "react"; export interface Props { component: ReactNode; // TODO: Change to

为了理解redux，我想编写简单的计数器增量代码。 请修改我的代码 这里有一个工作版本： 有很多不同的小问题，所以您只需逐个文件查看差异。以下是一个有效版本： 有很多不同的小问题，所以您只需逐个文件查看差异。以下是您面临的问题 在ActionCreator中 你有这个密码吗 import * as Types from "./Types"; export const incCounter = state => ({ Type: Types.INC_COUNTER, paylo

我目前正在开始使用react，并定义了两条路线： <Route path='/articles' component={ArticlesIndex} /> <Route path='/articles/create' component={ArticlesCreate} /> 和ArticlesCreate组件： import React, { Component } from 'react' export class ArticlesIndex extends Co

我试图使用with，因此SortableItem将是tr。问题是：对于要在bulma中获得样式的表行，它需要有一些父元素table-和类table。当尝试移动tr时，由于它正好位于主体-元素的末尾之前，因此它不再具有表-父元素，所有样式都将丢失，行将折叠 我该如何解决这个问题？我见过其他拖放库（不是react-specific）通过截屏元素和移动img来解决这类问题。。。如果我能操纵tr如何准确地附加到正文中，这将对我有所帮助。如果我无法使用react sortable hoc，是否还有另一个轻

我有一个关于react native中领域数据库的创建和使用的问题 我有两个屏幕，负责执行crud、category.js和client.js等操作 在category.js中，我有以下构造函数 constructor(props) { super(props); realm = new Realm({ schema: [{ name: 'category', primaryKey: 'id', properties: { id: 'int', descricao

我几个小时前刚刚听说Mobx是一个州管理图书馆。我决定尝试编写以下代码： import React from 'react' import { render } from 'react-dom' import {observable} from 'mobx'; import {observer} from 'mobx-react'; var appState = observable({athlete_name:"Cy Young"}); @observer export default cl

我正在苦苦寻找为什么我的按钮在我点击时不会发出声音。log（）测试可以正常工作，但是-部分不行。我还尝试了一些npm数据包来解决这个问题，但我的代码似乎有一个普遍的问题。怎么了？有人能帮我吗 main.js： import Button from './button'; class Drumpad extends Component { constructor(props) { super(props); this.state = {

重置输入字段后，如何将焦点设置回输入字段 谢谢 //代码 <div className={cn("input-border-wrapper", { "is-disabled": disabled })} > <input placeholder={label} required={optional === null ? !!required`${name}

我正在努力学习redux。我想我的还原器做得很好，我可以从存储中提取数据并通过道具进行设置 但我不能把注意力集中在商店状态的操作和更改数据上 我有这个： const mapDispatchToProps = (dispatch) => { return{ what goes in here? } } export default connect(mapStateToProps, mapDispatchToProps)(ComponentName); 我需

如果我的减速器中有一个状态，如： let initialState = { data: { name: '' }, }; 如何使用action.payload更新name值？ 我试过这些东西，但它给出了语法错误 case SET_NAME: return { ...state, data.name: action.payload }; 以及： case SET_NAME: return { ...state, state.dat

我正在使用nginx为我的react应用程序提供服务，它可以很好地将除静态文件以外的所有文件重定向到index.html，如下所示： location / { try_files $uri /index.html =404; } 有一段时间我对此很满意，但注意到当服务器上没有某些图像和javascript文件时，index.html会被提供。这本身不是问题 但是，当在应用程序之前添加缓存层时，它会缓存所有这些结果，因为它们的状态代码为200 我想要的是提供静态文件，并在其他请求不以某些扩展

我对Js的反应是全新的，我对下面的场景感到困惑。我在父组件中有一个名为availableShops的数组，我只是使用setState在子组件中更新它。我想在我的子组件中保留setState方法 家长： import React, { Component } from 'react'; import Child from './shop-with-price'; export default class Parent extends Component { constructor(pro

我在一个盖茨比的网站上工作，该网站到目前为止发展顺利。但在为生产构建时遇到了一个问题，即我们在各种页面索引文件中没有任何静态html，相反，看起来盖茨比将尝试从javascript注入页面，这与我们的预期相反 我看过一些关于盖茨比离线插件的帖子，我已经禁用了该插件，但这并没有解决问题。我们的页面不包含静态html输出，我希望注入的元内容也不存在 对于如何调试构建，以查看重置静态输出并用动态生成的Gatsby引导代码替换它的内容，是否有任何建议 用于该站点的插件包括： 插件：[ `盖茨比`， `

如果标题不清楚，我想在组件装载时运行一些代码，在特定变量更改时运行一些其他代码。我可以在[]中添加变量，但问题是，我希望某些代码只运行一次，而不是在变量更改时运行 仅供参考：该变量是一个窗口属性 提前谢谢 有两种不同的效果来处理每种情况 情况1：组件安装时 useEffect( () => { // do something }, [] // no dependency: run once ) useEffect( () => { if (varia

我正在使用redux observable，我有一个无法理解的Typescript错误，如果rxjs管道中的代码行太多，它似乎会随机出现： Type 'Observable<{}>' is not assignable to type 'Observable<{ type: "feed/PUSH"; payload: Profile; } | { type: "feed/POP"; } | { type: "feed/SWIPE"; payload: Swipe; } | {

我想更改上下文中设置的url。这里我想使用useQuery，在使用Query时，我成功地设置了一个新的url客户端，如下所示 const onlineDocumentServiceClient = new ApolloClient({ uri: process.env.REACT_APP_GQL_ODS }); <Query query={QUERY} client={onlineDocumentServiceClient}> const onlineDocumentServ

就像我们有Chrome开发者工具来调试React应用程序一样，在调试React本机应用程序时有什么等价物？是否需要遵循任何一般方法 开发React本机应用程序时，实际上是使用Chrome开发者工具进行调试。在设备或模拟器上运行的JS运行时已连接到计算机上的Chrome。你可以在中找到更多信息，当你开发React本机应用程序时，实际上是用Chrome开发者工具调试它们。在设备或模拟器上运行的JS运行时已连接到计算机上的Chrome。您可以在中找到更多信息

Favicon位于名为fav.png的资产文件夹中，但未显示在浏览中 我正在附加package.json文件截图、favicon链接行截图和favicon在浏览器中显示的截图的截图链接 package.json屏幕截图 favicon链接文件 浏览器中的favicon显示 对于favicon，请将您的png徽标转换为.ico文件，并将其放入public 文件夹。 检查index.html文件中的favicon链接react selected。 更改后，您可能会看到最后一个favicon，

正如标题所说，我使用的是RTL+Jest（带有CreateReact应用程序设置） 我的问题是，我是否应该在每个测试中使用beforeAll来预渲染该块中的组件，这样每个测试就不必从头开始重新渲染组件，因为我的测试套件总是从同一个基本组件开始这样做是否会提高性能？ 例如，这样做是否有改进 describe("MyComponent", () => { beforeAll(() => { render(<MyComponent {...props} /&g

我有一个锚定组件，我想有条件地设置其样式： <a className="menu-item" role="button" href="/#" style={renderChangeColor} > {changeStr} </a> const renderChangeColor = () => { let style = {}; if (changeSign === POSITIVE) { style["colo

我已经用konva创建了砖石网格，下面是我所取得进展的示例： 关于React中Konva图像的文档 我需要用同一张卡创建一个无限网格，但我不能用背景图像或填充图案填充矩形。我不确定如何创建img对象来填充矩形，或者如何在无限网格中重复相同的图像。。。svg在codesandbox中，这是我当前的代码： 在此方面的任何帮助都将不胜感激 import React, { Component } from "react"; import { render } from "

我正在使用React引导表，我希望在水平滚动上有一个事件 这就是我所做的，它似乎不起作用 useEffect(() => { let control = document.querySelector('.react-bootstrap-table'); control.addEventListener('scroll', handleScroll, { passive: true }) }, []); function handleScroll() {

如您所见，A和B做的工作非常简单。 当C中的state从true更改为false时，react将删除A已渲染的元素，并装载新的B渲染元素。这将导致HeavyComponent从头开始渲染 如果我使用D而不是C，结果将完全相同。然而。由于D将更新HeavyComponent而不是删除并渲染新组件，因此渲染将更加高效 问题是我想在库中同时导出A和B，很难期望其他程序员像D那样高效地使用A和B 我想你可以指出，我不需要定义A和B。但这只是一个简单的例子。在实际操作中，我有不止一个道具和更多组件。每个组