Questions tagged «reactjs»

如果您将数组作为状态的一部分，并且该数组包含对象，那么通过更改其中一个对象来更新状态的简便方法是什么？ 示例，从关于react的教程中修改而来： var CommentBox = React.createClass({ getInitialState: function() { return {data: [ { id: 1, author: "john", text: "foo" }, { id: 2, author: "bob", text: "bar" } ]}; }, handleCommentEdit: function(id, text) { var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first(); var updatedComments = ??; // not …

72 javascript  reactjs 

使用打字稿，并对带有明确键入类型定义的TSX文件做出反应，我得到了以下错误： error TS2339: Property 'for' does not exist on type 'HTMLProps<HTMLLabelElement>'. 尝试使用以下TSX编译组件时 <label for={this.props.inputId} className="input-label">{this.props.label}</label> 我已经解决了，但是在这里添加了下一个人，因为该解决方案在搜索时未显示在任何地方（Google或StackOverflow）

71 reactjs  typescript 

最近，我开始reactjs与backbonejs路由器一起使用来构建应用程序。 我通常将userequirejs用于依赖关系和代码管理。但是，当我尝试包含包含jsx语法的文件时会出现问题。 这是我目前所拥有的router.js： define(["backbone", "react"], function(Backbone, React) { var IndexComponent = React.createClass({ render : function() { return ( <div> Some Stuff goes here </div> ); } }); return Backbone.Router.extend({ routes : { "": "index" }, index : function() { React.renderComponent(<IndexComponent />, document.getElementById('index')); } }); }); 如何将IndexComponent放在其自己的文件中并在此文件中调用它？我尝试了通常的方法（与骨干和反应相同），但是由于jsx语法错误。

71 javascript  requirejs  frontend  reactjs 

我不断收到错误： “路由器”可能只有一个子元素 使用react-router时。 我似乎无法弄清楚为什么它不起作用，因为它与示例中显示的代码完全一样：快速入门 这是我的代码： import React from 'react'; import Editorstore from './Editorstore'; import App from './components/editor/App'; import BaseLayer from './components/baselayer'; import {BrowserRouter as Router, Route} from 'react-router-dom'; import {render} from 'react-dom'; const root = document.createElement('div'); root.id = 'app'; document.body.appendChild(root); const store = new Editorstore(); const stylelist = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css', …

71 javascript  reactjs  react-router 

升级到version后0.14.2，我看到一个错误和建议使用ReactDOM.render()而不是React.render()，但是从哪里导入？ 当我不导入它并按原样运行时，它显示为undefined。它是内置功能还是第三方库？

71 javascript  reactjs  browserify 

当我卷曲东西时，它可以正常工作： curl -L -i -H 'x-device-id: abc' -F "url=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" http://example.com/upload 我如何使其与axios一起正常工作？如果这很重要，我正在使用react： uploadURL (url) { return axios.post({ url: 'http://example.com/upload', data: { url: url }, headers: { 'x-device-id': 'stuff', 'Content-Type': 'multipart/form-data' } }) .then((response) => response.data) } 由于某些原因，这不起作用。

71 javascript  reactjs  multipartform-data  axios 

我创建表单，我包括几个TextField，DropDownMenu材质UI组件，问题是如何从一个obj中的所有TextField，DropDownMenus收集所有数据并将其发送到服务器。对于TextField，它具有TextField.getValue（）返回输入的值。但是我不知道如何使用它。 var React = require('react'), mui = require('material-ui'), Paper = mui.Paper, Toolbar = mui.Toolbar, ToolbarGroup = mui.ToolbarGroup, DropDownMenu = mui.DropDownMenu, TextField = mui.TextField, FlatButton = mui.FlatButton, Snackbar = mui.Snackbar; var menuItemsIwant = [ { payload: '1', text: '[Select a finacial purpose]' }, { payload: '2', text: 'Every Night' }, { …

71 javascript  reactjs  material-design  material-ui 

我想知道是否可以使用React进行逻辑并将数据发送回javascript函数，而无需呈现任何html。我正在考虑的组件是您将一些数据传递到的组件，它将在react之外将数据发送回javascript函数。我知道这是可以做到的，而我本人已经完成了这一部分，但是我不确定如果不呈现所需的HTML，您将如何做到这一点。这甚至是反应的实际用例吗？

70 javascript  reactjs 

最近，我一直在研究汇总，并发现它与Webpack和其他捆绑软件有何不同。我遇到的一件事是，由于“扁平捆绑”，对图书馆来说更好。这是基于一条推文和最近的React的PR来利用Rollup的PR。 以我的经验，由于对平面捆绑（例如吊装）进行了更好的优化，因此Rollup在构建库方面更好。1/2 如果您将应用程序与代码拆分等捆绑在一起，Webpack 2可能对您更好。2/2 我不完全确定我理解那是什么意思。平面捆绑指的是什么？我知道Rollup的文档中提到了树状摇晃以帮助减小捆绑包的大小，但是Webpack也有这样做的方法。也许我只是不完全理解这个概念。 请注意，这不是关于汇总与Webpack的比较问题。对于对此感兴趣的人，Webpack提供了一个比较表。这主要是在问什么是平面捆绑？汇总可能会在内部做些什么来实现这一目标？

70 reactjs  webpack  bundler  rollupjs 

我正在用React构建一个Minesweeper游戏，并希望在单击单元格或双击单元格时执行其他操作。当前，该onDoubleClick功能永远不会触发，onClick显示来自的警报。如果我删除onClick处理程序，则onDoubleClick可以。为什么两个事件都不起作用？是否可以在一个元素上同时存在两个事件？ /** @jsx React.DOM */ var Mine = React.createClass({ render: function(){ return ( <div className="mineBox" id={this.props.id} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}></div> ) } }); var MineRow = React.createClass({ render: function(){ var width = this.props.width, row = []; for (var i = 0; i < width; i++){ row.push(<Mine id={String(this.props.row + i)} boxClass={this.props.boxClass} onDoubleClick={this.props.onDoubleClick} onClick={this.props.onClick}/>) …

70 javascript  reactjs 

我有以下相同的问题： React Typescript（2312,14）：重复的标识符'LibraryManagedAttributes' 和 TypeScript错误：标识符'LibraryManagedAttributes'重复 但是我只是找不到任何解决方案。 我已经升级到最新的node / npm / yarn / typescript版本。还尝试降级。没有任何帮助。 yarn build --verbose yarn run v1.9.4 $ react-scripts-ts build --verbose Creating an optimized production build... Starting type checking and linting service... Using 1 worker with 2048MB memory limit ts-loader: Using typescript@3.0.3 and C:\dev\project\frontend\tsconfig.prod.json Warning: member-ordering - Bad …

70 reactjs  typescript 

使用React Native开发时如何隐藏iOS或Android的状态栏？我已经导入了StatusBar，但是我相信还有StatusBarIOS和一个StatusBar for Android。

70 reactjs  react-native  statusbar 

我正在使用React-Rails应用程序，并且在控制台中不断出现此错误： ``` Warning: validateDOMNesting(...): <th> cannot appear as a child of <thead>. See (unknown) > thead > th. 我不确定为什么这行不通..我想为表使用标头（thead），并且对其他人有用。我会把tbody放进去，但我需要桌子的实际主体。 这是此表的代码： ``` React.DOM.table className: 'table table-bordered' React.DOM.thead null, React.DOM.th null, 'Description' React.DOM.th null, 'Actions' React.DOM.tbody null, for post in @state.posts React.createElement Post, key: post.id, post: post, handleDeletePost: @deletePost **编辑我曾尝试在thead下添加tr标签，这会导致额外的错误。这就是我将代码更改为： ``` React.DOM.table …

70 javascript  jquery  ruby-on-rails  reactjs 

我想将字符串从Main传递到Header。它成功但警告。我是React的初学者，所以我不知道这it must be a function意味着什么。 有人知道如何解决此警告吗？ 警告是： 我的代码如下： Main.js import React from 'react'; import Header from './Header'; import AppList from './AppList/AppList'; import Footer from './Footer'; const propTypes = { mainInfo: React.PropTypes.shape({ title: React.PropTypes.string.isRequired, apps: React.PropTypes.array.isRequired, }), }; class Main extends React.Component { static methodsAreOk() { return true; } render() { …

69 reactjs 

关于Backbone.js，我最欣赏的事情之一就是简单而优雅的继承是如何工作的。我开始着手处理React，并且在React中无法真正找到类似于此Backbone代码的任何内容 var Vehicle = Backbone.View.extend({ methodA: function() { // ... } methodB: function() { // ... } methodC: function() { // ... } }); var Airplane = Vehicle.extend({ methodC: function() { // Overwrite methodC from super } }); 在react中，我们有mixin，如果使用mixin，我们可以像上面的例子那样 var vehicleMethods = { methodA: function() { // ... } methodB: …

68 javascript  inheritance  backbone.js  reactjs