Questions tagged «reactjs»

React(也称为React.js或ReactJS)是Facebook开发的用于构建用户界面的JavaScript库。它使用基于组件的声明式范例,旨在既高效又灵活。

2
registerServiceWorker在React JS中做什么?
我是React的新手,我想知道以下代码中的registerServiceWorker()的目的是什么? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker();

9
React.js ES6避免将'this'绑定到每个方法
最近,我开始修补React.js,我喜欢它。我开始使用常规的ES5,以便掌握所有内容,所有文档均使用ES5编写... 但是现在我想尝试一下ES6,因为它有光泽而且是新的,而且似乎确实简化了一些事情。让我感到困扰的是,对于我添加到组件类中的每个方法,现在都必须将“ this”绑定到该方法,否则它将无法正常工作。所以我的构造函数最终看起来像这样: constructor(props) { super(props); this.state = { ...some initial state... } this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); this.someHandler = this.someHandler.bind(this); } 如果我要在类中添加更多方法,这将变得更大,更难看。 我的问题是,是否有某种方法可以解决此问题,或者至少使其更容易,更短且更不丑陋?我想在React中使用ES6的主要原因之一是使我的代码更简洁,但这却相反。任何建议或意见将不胜感激。

1
如何从jQuery转到React.js?[关闭]
已关闭。这个问题需要更加集中。它当前不接受答案。 想改善这个问题吗?更新问题,使其仅通过编辑此帖子来关注一个问题。 6年前关闭。 改善这个问题 我已经读了几天的React。我可以理解大部分的内容,但是我对自己的编写能力并不完全自信。我一直在开发一个小型Web应用程序,该应用程序通过jQuery完成所有html生成并将元素彼此附加。我想尝试用React重建它,因为我相信它会更快。这个JSFiddle是我正在从事的工作的一个小例子。您将如何用React编写它? JS: function remove() { this.remove(); } function timed_append_new_element() { setTimeout(function () { var added_content = $("<span />", { class: "added_content", text: "Click to close", click: remove }); container.append(added_content); }, 3000); } function append_new_element() { var added_content = $("<span />", { class: "timed_added_content", text: "Click to …

9
由于Webpack中的CSS,Mocha测试失败
我是Mocha的新手,我正在尝试使用它来测试一个简单的React组件。如果react组件没有任何CSS样式,则测试将通过,但是如果React组件内的标签包含任何className,则会引发语法错误: Testing.react.js import React from 'react'; export default class Testing extends React.Component { render() { return ( <section> <form> <input type="text" /> </form> </section> ); } } testing.jsx import { React, sinon, assert, expect, TestUtils } from '../../test_helper'; import TestingSample from '../../../app/components/Testing.react.js'; describe('TestingSample component', function(){ before('render and locate element', function(){ …

4
运行create-react-app构建脚本时如何设置build .env变量?
我在create-react-app中使用以下环境变量: console.log(process.env.REACT_APP_API_URL) // http://localhost:5555 当我npm start通过读取.env文件运行时它起作用: REACT_APP_API_URL=http://localhost:5555 我如何像http://localhost:1234执行a一样设置其他值npm run build? 这是我的package.json文件: { "name": "webapp", "version": "0.1.0", "private": true, "devDependencies": { "react-scripts": "0.9.0" }, "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }


4
redux,react-redux,redux-thunk有什么区别?
我正在使用React + Flux。我们的团队计划从助焊剂转变为还原剂。Redux对来自助焊剂世界的我非常困惑。在磁通控制中,从组件->操作->存储和存储更新返回组件很简单。它很简单,也很清楚。 但是在redux中令人困惑。这里没有商店,是的,有些例子没有使用商店。我经历了一些教程,看来每个人都有自己的实现风格。有些正在使用容器,有些则没有。(我不知道这个Containers概念,也无法理解mapStateToProps,mapDispatchToProps的作用)。 有人可以清楚地说明redux中的控制流是如何发生的吗? redux中的组件/容器/动作/动作创建者/商店的作用是什么? redux / react-redux / redux-thunk /其他之间的区别?? 如果您可以发布任何简单而精确的redux教程的链接,这将非常有帮助。

3
在非交互模式下运行CRA Jest
更新:我的用例主要是在CI上运行测试,但是我通常想知道重写默认的CRA Jest参数。 我正在使用Create React App附带的Jest配置运行测试。它总是启动为交互模式: › Press a to run all tests. › Press o to only run tests related to changed files. › Press p to filter by a filename regex pattern. › Press q to quit watch mode. › Press Enter to trigger a test run. 但是我不希望它等待我的输入。我希望它运行一次然后终止。我尝试使用--bailor--no-watchman开关,但它仍以交互模式启动。 如果我全局安装jest,并在项目的根目录中运行它,它将执行一次并完成(就如我所愿)。但是当我跑步时npm …

5
使用动态键对对象进行PropTypes检查
React有很多使用PropTypes来检查道具价值的方法。我通常使用的是React.PropTypes.shape({...})。但是,最近我遇到一种情况,其中我有一个对象,该对象内部将具有动态键/值。我知道每个键都应该是一个字符串(采用已知格式),每个值都应该是一个整数。即使使用自定义道具验证功能,它仍然假设您知道道具的钥匙。如何使用PropTypes检查对象/形状的键和值是否正确? ... someArray: React.PropTypes.arrayOf(React.PropTypes.shape({ // How to specify a dynamic string key? Keys are a date/datetime string <dynamicStringKey>: React.PropTypes.number })) ... 再说一遍:我至少要检查每个键的值是一个数字。理想情况下,我还希望能够检查密钥本身是否是格式正确的字符串。
72 reactjs 

4
React.js —如何将属性对象传递给子组件?
我有一个称为的组件tileGroup,该组件的属性是其他属性的集合(数组)。 父component(tileGroup)通过使用集合中的每个属性集来创建子组件,从而呈现子组件的列表。 现在,我正在将每个属性分别从集合映射到子组件,但是如果组件的属性数量增加,这将变得很麻烦,而且我敢肯定有一种更干净,更简单的方法来做... 如何在不重新映射每个属性的情况下将全套属性传递给子组件? 示例代码: tileGroupData = {someProperty: 'something', someOtherProperty:'something', tiles: [{vsize:1, hsize:2, etc...}, {vsize:2,hsize:3,title:'whatever'}]}; 然后创建组件。 var tileGroup = React.createClass({ render: function() { var thechildren = this.props.tiles.map(function(tile) { //this is what I DON'T want to be doing. return <tileSimple vsize = {tile.vsize} hsize = {tile.hsize} content = {tile.content}/>; //what I …

6
如何配置ESLint以允许使用胖箭头类方法
Parsing error: Unexpected token =当我尝试整理Es6类时,ESLint引发错误。我缺少在eslint中启用胖箭头类方法的配置参数吗? 范例类别: class App extends React.Component{ ... handleClick = (evt) => { ... } } .eslint { "ecmaFeatures": { "jsx": true, "modules":true, "arrowFunctions":true, "classes":true, "spread":true, }, "env": { "browser": true, "node": true, "es6": true }, "rules": { "strict": 0, "no-underscore-dangle": 0, "quotes": [ 2, "single" ], …

3
可以在浏览器中测试React Native应用程序吗?
意识到React Native应用程序旨在使用模拟器进行开发/测试,是否可以使用Web浏览器来测试应用程序? 存在诸如https://rnplay.org/之类的服务,但是我担心的是,它由https://appetize.io/提供支持,它可能受到每月分钟数的限制。与付费屏幕流媒体服务相比,我还想利用免费/开源技术来实现这一目标。 沿着这些思路,为了在浏览器中测试该应用程序,是否要求该应用程序使用一个或多个库,以允许该应用程序既可以在React Native中运行,也可以在React中运行?我想找到一种替代此特定方法的方法,因为我想专门为React Native编写代码。

9
使用reactjs和typescript的typesafe select onChange事件
我已经弄清楚了如何使用事件的丑陋转换将事件处理程序绑定到SELECT元素上。 是否可以以类型安全的方式检索值而无需强制转换为任何值? import React = require('react'); interface ITestState { selectedValue: string; } export class Test extends React.Component<{}, ITestState> { constructor() { super(); this.state = { selectedValue: "A" }; } change(event: React.FormEvent) { console.log("Test.change"); console.log(event.target); // in chrome => <select class="form-control" id="searchType" data-reactid=".0.0.0.0.3.1">...</select> // Use cast to any works but is …

8
动作重做后反应路由器重定向
我正在使用react-redux和标准react-routing。确定动作后,我需要重定向。 例如:我已经注册了几个步骤。并采取以下措施: function registerStep1Success(object) { return { type: REGISTER_STEP1_SUCCESS, status: object.status }; } 我希望他重定向到带有registrationStep2的页面。怎么做? ps在历史记录浏览器中从未使用过“ / registrationStep2”。仅在成功注册结果步骤1页面之后,才会显示此页面。

3
表单propType失败:您在没有`onChange`处理程序的情况下为表单字段提供了`value`属性
加载我的React应用程序时,我在控制台中收到此错误。 警告:表单propType失败:您在value没有onChange处理程序的情况下为表单字段提供了prop 。这将呈现一个只读字段。如果该字段应可变使用defaultValue。否则,设置onChange或readOnly。检查的渲染方法 AppFrame。 我的AppFrame组件如下: class AppFrame extends Component { render() { return ( <div> <header className="navbar navbar-fixed-top navbar-shadow"> <div className="navbar-branding"> <a className="navbar-brand" href="dashboard"> <b>Shire</b>Soldiers </a> </div> <form className="navbar-form navbar-left navbar-search alt" role="search"> <div className="form-group"> <input type="text" className="form-control" placeholder="Search..." value="Search..."/> </div> </form> <ul className="nav navbar-nav navbar-right"> <li className="dropdown menu-merge"> <span …

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.