首页 > TAG信息列表 > react-jsx

javascript-使react-router不会破坏Jest(reactJs)测试

我目前正在尝试将Jest测试添加到React应用程序(找到here). 但是,当我运行以下测试时, /** @jsx React.DOM */ jest.dontMock('jquery'); jest.dontMock('../js/components/CategoryPage.jsx'); describe('Category Page', function() { var React = require('react/a

javascript-返回将组件和状态混合在一起的React组件

我认为这可能是一种反模式,但是我想在定义组件的类名时同时使用props和state.这样,我可以分配多个类. 我的模式是： render: function() { return ( <div className="portrait-speaker default" onClick={this.handleClick}> <audio className={this.props.defaultc

javascript-“ Firebase不是构造函数”-需要降级Firebase,该怎么做？

我目前正在从this course on Udemy开始学习React.js.我已经到达了第27讲,并且处于停滞状态.我不断收到错误消息“ Firebase不是构造函数.”仅查看其他人的问题,我发现我需要将Firebase降级为V.2.唯一的问题是,我该如何去做？ 我转到我的app.jsx文件,并将Firebase更改为“ ^ 2.4.2”.

javascript-如果设置为true,则在JSX中设置className

我的组件中有一个按钮,如果接受项目状态,则应禁用该按钮,否则应附加引导成功类. 我在这里面临的问题是,disabled不是className而是属性,bootstrap btn btn-success是className. 如果只是关于类名,我没有问题,就像这里 className={items.status === 'declined' ? 'danger' : 'succe

javascript-客户端非ES6浏览器上的JSX传播属性

ReactJS JSX具有一种可以轻松地向组件添加许多属性的方法： var props = {}; props.foo = x; props.bar = y; var component = <Component {...props} />; 这些称为传播属性. https://facebook.github.io/react/docs/jsx-spread.html#spread-attributes …表示法称为ES6中使用的Spr

javascript – React Cookie ReactJS：如何设置cookie的过期时间？

在我的ReactJS项目中,目前我正在保存cookie,如cookie.save(‘token’,received_token,{path：’/’});并从本地存储中检索它,如下所示：cookie.load(‘token’);. 所以我想知道,是一种设置到期时间.save()收到令牌的过期时间的方法,一旦过期,会自动将其从本地存储中删除吗？ 谢谢你,并会

javascript – 从字符串中反映渲染组件

是否可以从字符串动态呈现React组件？ 基本上我有来自数据库的页面内容,我想在内容中包含React组件.我正在努力实现的一个例子： var html_string = '<i>React Component Rendered</i>: <Hello name="World" />'; var Hello = React.createClass({ render: function() { return

javascript – 如何在React中获取文本框的值？

我刚开始使用React.js,我只是不确定是否有一种特殊的方法来获取文本框的值,在这样的组件中返回： var LoginUsername = React.createClass({ render: function () { return ( <input type="text" autofocus="autofocus" onChange={this.handleChange} /> ) }, h

javascript – 没有通量的React(JSX)中的子到父通信

我是React的新手,我正在努力解决我认为简单的问题.这是我构建的组件的图片. Color Picking Component 我想要完成的事情似乎微不足道,但实际上我读过的每篇文章都解释了要做的事情告诉我一些不同的事情,而且其中一个解决方案并没有奏效.它分解为：当用户点击标签时,它会构建一个托盘

javascript – 使用浏览器/插件调试JSX

有没有办法调试JSX文件？ 当我检查safari / chrome中的资源选项卡时,我无法看到.jsx文件.我们可以使用调试器吗？解决方法:安装Chrome Extension后打开devTool(f12),你可以看到： >新的反应选项卡 – 用于检查反应元素(如常规检查). >在源选项卡(左侧面板)中有一个新的应用程序列表,您可

javascript – 在JSX中添加空格时的最佳实践

我理解如何(和why)在JSX中添加空格,但我想知道什么是最佳实践或者是否有任何真正的区别？ 将两个元素包裹在一个范围内 <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> 将它们添加到一行

javascript – 从React Native中的数组映射函数动态渲染内容

我正在尝试从数组中获取数据并使用map函数来呈现内容.看着 **{this.lapsList()}** 和相关的 **lapsList()** 功能,以了解我正在尝试做什么.结果是什么都没有显示(视图下的视图等)这是我的简化代码： class StopWatch extends Component { constructor(props) { super(props

javascript – 未捕获的TypeError：this.state.data.map不是函数

我是React的新手,看过一些类似的问题,但没有发现为什么会这样.我得到一个“未捕获的TypeError：this.state.data.map不是一个函数”. 这是代码.请帮忙找出问题所在. class Audienses extends React.Component { constructor (props) { super(props); this

javascript – react-redux将道具传递给子组件道具

我试图将道具传递给子组件但是孩子总是收到空的. 这是使代码更清晰的代码. 当我将子组件传递给子组件时,它可以工作这是工作代码： render() { return ( <div> <PostList list={ this.state.posts }></PostList> </div> ); } 但在我的情况下,我想从redux状态

javascript – babel watch SyntaxError：意外的令牌

当我使用babel观看jsx文件时.但是存在语法错误. 在此之前,我使用react-tools观看,一切都很好. SyntaxError: assets/js/chat/chat.jsx: Unexpected token (258:16) 256 | if (this.props.isOpen) { 257 | return ( > 258 | <div classNam

javascript – 如何在ReactJs中呈现重音？

我正在尝试使用ReactJS和JSX渲染元素,内容重音字符,但它不会返回我想要的 我的JSX： var Orcamento = React.createClass({ render: function() { return ( <div> <h1>Orçamento</h1> </div> ); } }); React.re

javascript – JSX React中的动态tabIndex属性

如何以相同的方式有条件地在React组件上设置tabIndex属性,比如设置’disabled’属性？ 我需要能够一起设置值和/或删除属性. 首先尝试使整个属性键和值变量： <div { tabIndex } ></div> 但是编译器抱怨道. 第二个想法是： const div; if( condition ){ div = <div tabIndex="1"></

javascript – React.js – 有条件地使用dangerouslySetInnerHTML

我有一些代码给Regex一些文本并将其包装在< span />中像这样： highlightQuery() { // will output the text response from the Model, but also highlight relevant words if they match the search query // that the user input let input = this.props.model.get('

从Activity类调用方法(React Native Android)

是否有一个API来调用Activity类的方法？我需要在我的应用程序上调用finish()但在文档中找不到任何相关内容. 更具体地说,当我按下特定的TouchableHighlight时,我希望从index.android.jsx中完成()MainActivity. [更新] 现在我正在从NativeModule中暴露一个finish()方法,但也许有更好的

javascript – 过滤和排序React

我是开发新手React我有一个项目,我必须在我的表上添加过滤器和排序功能,我真的不知道从哪里开始.以下模板： 怎么办？ import * as React from 'react'; import { SPComponentLoader } from '@microsoft/sp-loader'; import styles from '../components/SearchSpfx.module.scss'; impo

javascript – reactjs checkboxlist组件 – 更新父级中的状态更改

我有一堆复选框列表要求.我会详细解释.我有一堆语言说： var languages = ["English", "German", "French", "Spanish", "Mandarin", "Tamil"] 我有一个父组件,其中有一个表单,我有四个部分,说： class Page extends React.Component { render() { retu

包装JavaScript函数参考

我有以下JavaScript代码,它按预期工作… /** @jsx React.DOM */ var TreeView = React.createClass({ render: function() { return <div ref="treeview"></div>; }, componentDidMount: function() { console.log(this.props.onChange); var t

javascript – React js：如何在存储在变量中的JSX组件中设置props

假设我已经定义了一个组件： class Co extends React.Component { render = () => { const name = this.props.name; return ( <p>Hello, my name is {name}</p> ) } } 并将其存储在变量中： const co = <Co />; 如何使用变量设置组件

javascript – 如何使用React Native集成Stripe并符合PCI标准？

我到处研究过,似乎React Native并不支持Stripe.我看过https://github.com/xcarpentier/react-native-stripe-api和https://github.com/lrettig/react-native-stripe,但前者已过时,不支持Stripe Connect,后者仅支持iOS. 所以唯一一个可靠且有意义的是http://blog.bigbinary.com/2015

javascript – Animate Gradient Color React Native

我正在尝试创建一个反应原生的渐变,当应用程序打开时将以一种颜色开始,然后每30秒逐渐变为另一种颜色.常规线性渐变无需添加动画即可工作.我尝试使用插值和动画时序,如本机文档中所示,但似乎没有任何效果. 我的代码： import React, {Component} from 'react'; import {processColor