2回答
我已经创建了一个Rails应用程序并安装了。我还安装了，以帮助我管理外部响应包。
我的整个设置似乎工作得很好，但是当我尝试使用包的模态组件时，我会遇到一个防火墙错误，它似乎阻止了所有其他js的执行。该错误如下：
不变性违反:addComponentAsRefTo(.)：只有ReactOwner才能有参考文献.
我已经尝试过许多可能的解决方案，但都没有成功。我真的不明白为什么我要得到错误，为什么它只发生在特定的组件上，比如<Modal />。如果我使用普通的html模式，就没有错误。这是我的设置：
package.json
{
"name": "m
浏览 0提问于2016-10-01得票数 4
我正在使用React Router创建一个多页应用程序。我的主要组件是<App/>，它将所有路由呈现给子组件。我正在尝试通过路径传递道具，根据我做过的一些，子组件访问传递的道具最常见的方式是通过它们继承的this.props.route对象。但是，这个对象对我来说是未定义的。在子组件中的render()函数上，I console.log(this.props)和am返回一个如下所示的对象
{match: Object, location: Object, history: Object, staticContext: undefined}
看起来一点都不像我想要的道具。下面是我详细
浏览 2提问于2017-05-30得票数 20
回答已采纳
2回答
我想创建一个组件来处理具有相同属性/逻辑的多个HTML元素。 import React from 'react';
import styled from 'styled-components';
interface GridProps {
htmlElement: 'div' | 'main' | 'header',
}
const GridFactory = (props: GridProps) => {
switch (props.htmlElement) {
case 'h
浏览 28提问于2020-08-16得票数 3
回答已采纳
2回答
这是我的customers.jsx文件customers.jsx是其中的主文件主要代码在这里
<Route path="/data/:gender1"
exact
render={() => {
return (
<div >
<Customers2/>
</div>
);
}}
/>
这是我的customers2.jsx文件
import R
浏览 1提问于2018-08-30得票数 0
如果我将一个jsx组件(A)作为属性传递给另一个组件(B)，如下所示：
import A from "A.jsx";
import B from "B.jsx";
...
class MyClass extends React{
...
render(){
return <B customContent={A} />
};
}
当组件B在React生命周期中更新时，A也会更新吗？
浏览 0提问于2019-04-09得票数 0
当然，我正在尝试通过合并Foundation来完成"Todo“应用程序的示例。我有三个有问题的组件: TodoList.jsx、Todo.jsx和TodoModal.jsx。
我想要的是在todoList中显示在每个待办事项下面的链接，以弹出一个带有todo内容的模式。我的问题是:我可以启动Modal，但相同的Modal会弹出，不管我点击的是哪个要做的链接。似乎我无法更新TodoModal.jsx中的道具，并且可能是组件生命周期中的React，但我确实需要进一步的帮助。我刚上了一门在线反应课程，所以我还是新手。任何帮助都是非常感谢的！
下面是TodoList.jsx (向TodoMod
浏览 1提问于2016-06-22得票数 0
回答已采纳
如果这个问题听起来很愚蠢，很抱歉。我正在尝试将用户重定向到应用程序的内容页面，当他们登录。我当前的实现正确地更改了地址栏中的URL，但没有呈现组件并显示一个空白页面。我是不是漏掉了什么。你能告诉我我遗漏了什么吗？ 我试着用谷歌搜索它，但没能让它工作。下面是我尝试过的一些链接。 1- https://tylermcginnis.com/react-router-programmatically-navigate/ 2- https://learnwithparam.com/blog/redirect-route-in-react-router/ 3- Programmatically navi
浏览 81提问于2019-10-01得票数 0
回答已采纳
我有一个react-rails项目(ES5)，其中我试图在React Component.js.jsx中呈现来自_form.html.erb文件的表单……我真的不知道如何处理这种情况，如果它是可能的话。我的项目中有许多窗体，但在我的html.erb视图中，所有窗体都以传统的<%= render "samples/new_sample_form" %>方式呈现。但是，现在我在一个React组件中，正在尝试将我的Rails表单拉入js.jsx文件。我曾尝试创建一个变量var sampleForm = "<%= render 'samples/new
浏览 0提问于2017-10-11得票数 1
我正在尝试为数据结构创建一个简单的基于网格的编辑器，并且我在使用React.js时遇到了一些概念上的问题。他们的文档对此帮助不大，所以我希望这里有人能帮上忙。
首先，将状态从外部组件转移到内部组件的正确方法是什么？是否有可能将内部组件中的状态更改“冒泡”到外部组件？
其次，两个独立的组件是否可以共享数据，以便其中一个组件中的突变在另一个组件中可见？
下面是我想做的事情的简化示例()：
我有一个包含employee对象数组的company对象。我想在一个可编辑的网格中布局employee列表。当我单击该按钮时，我希望看到生成的company对象，以及任何突变(写入控制台)。
/** @jsx R
浏览 0提问于2013-12-27得票数 46
回答已采纳
3回答
我有一个使用React.js创建div的场景，代码如下：
React.createElement('div', {}, "div content")
一些额外的javascript处理将允许我在以后推断这个div是否需要将className属性设置为“ClassA”或"ClassB“，或者它是否根本不应该有className。
在javascript中，有没有办法访问从React DOM创建的div，并将className属性添加到其中？
注意:我无法实现这是JSX，所以我求助于createElement方法。
编辑:值得一提的是，我可能需要有条件地添
浏览 0提问于2016-10-14得票数 7
1回答
我正在尝试学习什么是上下文，这是我到目前为止收集到的： 它的用法是，无论何时创建上下文，都必须使用声明的常量来定义子组件中的contextType，以便能够使用上下文。 这是example from the official docs const ThemeContext = React.createContext('light');
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="dark">
浏览 15提问于2018-12-20得票数 2
回答已采纳
使用v0.13.0中引入的React.findDOMNode方法，我能够通过this.props.children上的映射获得传递给父组件的每个子组件的DOM节点。
但是，如果其中一些子元素恰好是React元素而不是组件(例如，其中一个子元素是通过JSX创建的<div> )，那么React将抛出一个不变的违规错误。
是否有一种方法可以在挂载后获得每个子节点的正确DOM节点，而不管子节点是哪个类？
浏览 6提问于2015-04-10得票数 72
回答已采纳
2回答
我正在使用function，并且有一个名为"Button.jsx“的无状态组件，我将向按钮组件发送一个函数(通过道具)，如下所示：
app.jsx
addValue(){
console.log("add")
}
<Button className="btn btn-primary" text="click" action={this.addValue}/>
在Button.jsx
import React from 'react'
export default class Button extend
浏览 3提问于2017-10-22得票数 2
回答已采纳
我创建了三个基本组件。
A呈现两个组件B和C就像标头一样，制表符1、2、3 C是第一页，其中有两种形式，一次显示一页。在显示第一个表格时，我需要在B组件中显示制表符1。在显示第二种形式时，我需要在B组件中显示选项卡3。
我只想把C组件的数据传递给B组件。
我将状态放在C组件上，并试图在B控制器中使用相同的this.state.data或this.props.data来实现没有值。
A.jsx
import React from 'react';
import B from './B.jsx';
import C from './C.jsx'
cl
浏览 2提问于2017-01-16得票数 6
我试图使用jest-cli测试一个react组件是否包含它的输出中的另一个组件。我想不出该怎么做。
以下是我的组件：
DesignerPage组件
[...]
var TopBar = require('../components/layout/TopBar.js');
var DesignerPage = React.createClass({
getInitialState: function() {
var state = {
};
return state;
},
render: function() {
return (
浏览 4提问于2014-10-10得票数 17
我正在尝试创建一个自定义的“输入”组件，并扩展默认的html输入属性(props)。
但是，我也试图在我自己的接口定义中使用类型记录的省略来覆盖默认的'size‘属性，但是似乎无法让它工作。
(我还尝试了类型记录的选择/排除和自定义覆盖类型，但得到了相同的错误.)
我已经尝试过类似的线程：
import React from 'react';
type A = React.HTMLAttributes<HTMLInputElement>;
interface InputProps extends Omit<A, 'size'>
浏览 8提问于2020-10-09得票数 2
回答已采纳
我正在学习props，我有一个问题，在这种情况下，如何才能在HOC中获得。
WithRainbow.js(专案)
import React from 'react';
const withRainbow = (WrappedComponent) => {
const colors = ['red', 'blue', 'orange'];
const randomColor = colors[Math.floor(Math.random() * 3)];
const className = rando
浏览 0提问于2019-01-31得票数 0
回答已采纳
1回答
在反应部件之间通过道具
、、、、
我正在努力学习如何将事情分解为更小的组件，并决定从Rows.jsx的以下代码开始。我认为我的问题是理解道具如何在父/子组件之间传递。我读过许多指南和文章，但我很困惑我是否正确地使用了import。还是我应该对处理程序进行组件化？如果我做得对还是做错了，请帮我理解一下。
Rows.jsx；(以前在DynamicTable.jsx末尾)
import React, { Component } from 'react';
function RenderRows () {
render() {
var context = this; //modify this
浏览 4提问于2022-06-05得票数 0
我试图将一些道具从React类传递给我的函数组件，它是formik的，然后我想添加一些回调函数，以使这些数据返回到更改后的文本。但是我不确定我该怎么做。请检查我的以下代码： 这是我的Main.jsx类 // Some imports were removed to keep everything looks cleaner
import RegisterAccount from "RegisterAccount.jsx";
class Main extends React.Compoenent {
constructor(props) {
s
浏览 14提问于2019-06-13得票数 1
回答已采纳
在我的一个组件(Source.jsx)中有一个返回数组的方法。我想在我的所有其他组件中访问这个数组(比如Article.jsx，它不一定是Source的子组件)。这个是可能的吗？
//Soure.jsx
export default class Source extends React.Component {
//Returns an array which I want to use in Article.jsx
getCategories() {
let sourceCategories = this.fetchAllCategories();
let sort
浏览 0提问于2017-05-26得票数 0
3回答
我在做反应。我刚刚创建了一个名为Input.jsx的组件
import React from "react";
const Input = (label, placeholder) => {
return (
<label htmlFor={label}>
{label}
<input type="text" placeholder={placeholder} />
</label>
);
};
export default Input;
我导入它并在index.js中
浏览 2提问于2020-10-03得票数 1
回答已采纳
我的React组件之一是我的主布局，我在其中显示一个导航栏，其中包含当前登录的用户。问题是在第一次呈现组件时，Meteor.user()是undefined。一旦加载/发布了用户对象，我该如何正确地呈现导航栏？
MainLayout.jsx
import React, { Component } from 'react';
export default class MainLayout extends Component {
render() {
return (<div>{ Meteor.user().username }</div>);
浏览 1提问于2016-08-05得票数 0
我有一个简单的，我正在使用类型记录将其组装在一起，并且我正在努力理解如何使导航正确工作。
我列出了一个内容部分的列表，以及当一个部分被选中以在when视图中打开所选的文章时。我无法理解的是，我应该如何将for视图的URL传递给包含它的视图。导航列表和web视图在被选中时都应该填充屏幕。
就目前情况而言，我的基本组件是GuidanceNavigation，它包含一个Stack.Navigator和一个Stack.Screen，用于列出所有主题的NavigationItems视图，以及一个用于InstructionView的Stack.Screen，该Stack.Screen包含用于显示说明的an
浏览 4提问于2021-02-19得票数 1
回答已采纳
考虑一下这个简单的案例：
图书馆客户：
class ClientComponent extends React.Component<any,any> {
render() {
const myNestedElement = (<LibNestedComponent/>)
return <LibComponent nested={myNestedElement}/>
}
}
图书馆：
class LibNestedComponent extends React.Component<any,any>
浏览 4提问于2017-03-22得票数 3
我是ReactJS的新手。我需要有一个通用的标题，并根据路由的变化来更改标题。是否需要创建header.jsx文件并将其导入？否则，如何使用route呈现头部(公共文件)？
我的路由部分如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Home from './Home.jsx';
import { Router, Route, Link, browserHistory, In
浏览 0提问于2016-07-22得票数 13
回答已采纳
我正在创建一个小叶地图组件，这是一个关于plunker的例子
以下是代码
leaflet.jsx
/** @jsx React.DOM */
/*jshint indent: 2, node: true, nomen: true, browser: true*/
/*global React */
'use strict';
module.exports = React.createClass({
getInitialState: function () {
return {
map: {}
};
},
componentDidMou
浏览 0提问于2014-08-12得票数 20
回答已采纳
2回答
我刚刚开始使用es6学习Meteor和React，而且我很难理解this.props。它是从哪里来的？我没有自己为类定义它的代码。提前谢谢你。
这是我的简单代码的一部分-todos/import/ui/App.jsx：
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import ReactDOM from 'react-dom';
import { Tasks } f
浏览 5提问于2016-05-19得票数 1
回答已采纳
我想获得流星反应项目中的当前路径，我想创建登录页面externally..how，我可以这样做吗？这是我的源代码
client/main.jsx
import React from "react";
import {meteor} from "meteor/meteor";
import {render} from "react-dom";
import {
BrowserRouter as Router,
Route
} from "react-router-dom"
import "./main.c
浏览 0提问于2018-02-21得票数 3
回答已采纳
1回答
我正在从此Link中提到的路由发送React组件 <Route path='/StartCompaign' render={(props) => <CampaignStart {...props} isDashboard={true} /> } /> 我在另一个组件中得到了支持，比如 {props.childern.render.isDashboard ? <Header /> : "NO" } APP.JSX文件 import React from 'react';
import { Route,
浏览 11提问于2019-04-15得票数 0
回答已采纳
1回答
到目前为止，我对属性是如何通过参数从一个组件传递到另一个组件的知识范围如下
//开始:我的知识范围
假设在topic中存在一个名为A.jsx的状态变量。我想把它传递给B.jsx，所以我执行以下操作
B = require('./B.jsx')
getInitialState: function() {return {topic: "Weather"}}
<B params = {this.state.topic}>
在B.jsx中，我可以做类似的事情
module.exports = React.createClass({
render: funct
浏览 2提问于2015-10-02得票数 30
回答已采纳
TypeError: lists.map不是一个函数
1.我使用React来制作一个TodoList。在添加列表之前，单击按钮时添加删除功能时会出现错误。
2.使用useContext将列表与其他文件分开是否有问题？
我为这个问题的尴尬而感到抱歉。谢谢你帮助解决这个问题。
TodoList.jsx
import React, { useContext} from 'react';
import Todo from './Todo';
import { ListContext } from './ListContext&
浏览 0提问于2019-07-21得票数 1
回答已采纳
我正在对记录进行筛选，它有条件地显示以下两个选项之一: 1) record.jsx组件列表，或2)单个noResults.jsx组件。
过滤器(filter.jsx)位于一个名为recordsHeader.jsx的组件中，作为HTML select标记。它有一个调用getRecords方法的onChange事件，该方法允许根据select标记中的某些选项过滤结果记录。
目标:我想在noResults.jsx中有一个按钮，可以将过滤器设置回'all‘。问题:我可以将getRecords方法传递给它，它将显示它们，但不会直观地将select标记重置为'all‘。
我知道我可以用jQ
浏览 0提问于2017-04-06得票数 0
我正在发现ReactJS和material ()。
我试图为我的应用程序创建一个默认模板。我想在分离的组件中使用AppBar和LeftNav (在新版本中在抽屉中重命名)。
默认情况下，AppBar上有一个菜单按钮。我想使用它来打开LeftNav，但是我不知道如何调用LeftBarComponent组件函数来打开它。
我几乎已经理解了如何在组件之间进行通信，但在我的例子中，我不知道该如何做，因为没有关于它的文档。我知道打开LeftNav元素的唯一方法是使用LeftNav.toggle()
谢谢你的帮助。
Default.jsx
use strict';
var React = re
浏览 0提问于2015-02-24得票数 21
回答已采纳
我一直在学习ReactJS，我编写了一个简单的程序，其中一些记录显示在一个列表中，每一条记录都可以通过单击其删除按钮来删除。在我的代码中有三个组件。“存储”调用“视图”组件显示记录，“视图”调用“操作”组件用于删除任何记录。
现在的问题是，当我按下删除按钮删除任何记录，我得到的Uncaught TypeError: Cannot read property 'deleteRecord' of undefined错误。所以请告诉我的代码中有什么问题吗？
错误：
Uncaught TypeError: Cannot read property 'deleteRecord&#
浏览 0提问于2017-09-27得票数 0
我要创建我的custom tag：
/** @jsx React.DOM */
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClas
浏览 3提问于2013-12-27得票数 3
回答已采纳
我正在尝试从render函数向组件传递一个值：
= react_component('App', props: {test: 'abc'}, prerender: false)
Routes.jsx
<Route path="/" component={App} >
App.jsx (组件)
class App extends React.Component {
render() {
return (
<Header test={this.props.test}>
</Header
浏览 38提问于2017-11-15得票数 7
你好，谢谢你阅读这个问题！
我已经学习了几个星期，我很难理解refs如何获得React的实例并将其放入JS变量中。
例如，我们可以讨论文档的示例：
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// Explicitly focus the text input using the raw
浏览 1提问于2018-02-18得票数 1
回答已采纳
1回答
我有一个图例，其中包含多个Legend.Items子元素。我有一个问题，目前的onClick是有可能取消选择所有的传奇项目，其中的后果，我想避免。是否可以在onClick组件中设置某种Legend处理程序，使其具有某种状态clicked，并检查是否存在“已选定/褪色”的n - 1图例项，而n是图例项的总数？我查看了JSX属性，但是由于我使用的是{this.props.children}，所以我不知道如何使用它们，或者它们在这种情况下是否能工作。
我还看了一下这个博客()，但在我看来，它有点烦琐，我认为可能有一种更传统的方式。我是ReactJS的新手，所以如果我需要提供更多的上下文，请告诉我！
浏览 1提问于2015-06-01得票数 1
回答已采纳
我正在尝试使用React Komposer加载数据，我不确定我做错了什么，我很确定这是应该的方式，除非我遗漏了什么。但我在UI中得不到任何数据。可能需要帮助
container.js
import { composeWithTracker } from 'react-komposer';
import RightNavBar from './right-nav-bar.jsx';
function composer(props, onData) {
const subscription = Meteor.subscribe('currentUs
浏览 0提问于2016-10-28得票数 0
我是新的反应，我有一个问题的路由器。我已经尝试过几种解决方案，但没有什么结果。我想知道我是否做错了我的文件路由器或webpack-配置，如果有人可以帮助我，我会非常感谢。
错误：
我相信，如果我解决了第一个错误，其余的将自我纠正。因为我是新手，所以我不能肯定这一点。这是我的密码。
routes.jsx：
import React from 'react';
import { BrowserRouter as Router , Route, Switch } from 'react-router-dom';
import createHistory from &
浏览 0提问于2018-11-29得票数 0
回答已采纳
我已经创建了一个光秃秃的流星应用程序，使用React。它在一个名为client的文件夹中使用下面所示的三个文件(以及其他文件)。在控制台中，应用程序打印出：
withTracker
rendering
withTracker
rendering
props {} {}
state null null
换句话说，被呈现了两次。最后两行输出表明，this.props和this.state在呈现之间都没有改变。
index.html
<body>
<div id="react-target"></div>
</body>
main.
浏览 6提问于2020-06-05得票数 3
1回答
正如所看到的那样，我正在尽我所能地将我的应用程序的组件解耦，使它们不知道任何存储或操作创建者。
目标是让它们管理自己的状态，并调用函数来发出更改。我听说你用道具做这件事。
考虑
// Menu.jsx
import React from 'react'
import { className } from './menu.scss'
import Search from 'components/search'
class Menu extends React.Component {
render () {
return (
浏览 4提问于2015-12-20得票数 12
回答已采纳
1回答
我正在尝试使用JSON文件在Gatsby中动态创建页面。在该文件中，我定义了应该在页面中呈现的组件。
我跟踪了盖茨比的文档，但是，它没有我想要的东西。因此，我试图通过读取JSON文件并遍历其中的组件并使用React.createElement()创建页面。最后，我得到了一个react组件数组，并将其传递给createPage方法的上下文对象中的一个子支柱，然后传递给模板页面组件。
这是解决这个问题的正确方法吗？它在盖茨比里可行吗？
我认为，我尝试了动态导入，并且它运行得很好，这是很有用的，但是我正在试图找到一种方法，使我不必将所有组件都转储到一个文件夹中。
我为这个项目准备了一份吉特布回购协议
浏览 0提问于2019-07-30得票数 2
回答已采纳
1回答
我刚刚开始为我的react应用程序探索一个单元测试框架。我将我的选择锁定在@testing-library/react而不是Enzyme，这是React推荐的，并且有助于编写更健壮的测试。为了完整起见，我还计划使用Jest。
但在我开始React Testing Library之前，我只想问几个问题。有人能帮忙吗？
例如,
有一个基于用户输入更新Redux存储的Editor组件，有另一个组件Preview直接从存储中读取值，还有第三个组件Container，它包含上述两个组件传递一些道具。<code>H 213</code><code>G 214</c
浏览 1提问于2020-05-27得票数 3
回答已采纳
2回答
我正在做一个迷你项目，用户可以编辑图书信息。该应用程序向用户提供一个筛选器，以选择小说或科学主题类别。一旦被选中，他就会看到一个图书列表，在那里，他可以通过单击“编辑”按钮来更改书的细节。编辑时，他可以选择保存或取消表单详细信息。整个工作流都在一个页面上！为此，我使用React，Redux和Redux-form，其中组件I-选择类别(虚构，科学)，组件II-该类别的书籍列表和组件III-表单来编辑图书详细信息。看到附加的图像来想象应用程序。
应用程序的工作:一旦用户选择了小说/科学，就会派出一个动作来列出可用的书籍。一旦他点击了一本书的“编辑”按钮，另一个动作就会被分派来显示预先填充了书
浏览 0提问于2018-11-06得票数 2
我有5代组件结构: A-B-C-D-E
首先，我创建一个上下文：
const ThemeContext = React.createContext();
在A中创建了提供程序
<ThemeContext.Provider value={this.props.name} >
<Col><Menu navbarState={this.state.name} /></Col>
</ThemeContext.Provider>
在E中，我需要使用{this.props.name}创建上
浏览 0提问于2018-09-01得票数 1
回答已采纳
1回答
我正在使用react和npm组件包创建一个chrome扩展。我试图在页面上显示一条错误消息。当我触发错误消息组件时，我得到了一个错误。
这是错误：-
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional he
浏览 2提问于2021-06-08得票数 0
3回答
使用包含特定和Redux的流
、、、、
我正面临流类型方面的问题。下面是代码，简化为相关部分：
/* @flow */
import * as React from 'react';
import { connect } from 'react-redux'
export type InjectedProps = {||};
type StateProps = {||};
type DispatchProps = {||};
type OwnProps = {||};
type ReduxProps = {|
...OwnProps,
...StateProps,
...Dispatch
浏览 2提问于2019-09-05得票数 2
我是个新手，我正在试着弄清楚一些基础知识。在其他模板引擎中，例如EJS或Jade，当您在路由/控制器文件中呈现视图文件时，您可以传入一个上下文变量。但是，我还没有找到任何使用React/jsx来完成此任务的方法。我需要注意的是，我正在使用Express。
实际上，我不确定jsx是不是一个视图引擎，或者React是不是内置的。在这两种情况下，我都不知道如何将上下文从服务器传递到视图文件。
例如，如果我想加载配置文件信息(存储在服务器/后端)，我如何将其传递到React/jsx中的前端jsx视图文件？
浏览 1提问于2017-01-05得票数 2
1回答
我正在开发一个React应用程序，并且我正在使用Redux来存储状态。我有以下代码： requests.data.js： export default {
requests: [
{
"id": 9,
"timestamp": Date.now(),
"description": "Need help with ordering",
"status": "Completed"
浏览 12提问于2020-04-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
