Questions tagged «reactjs»

我正在尝试使用react-router（版本^ 1.0.3）重定向到另一个视图，这让我很累。 import React from 'react'; import {Router, Route, Link, RouteHandler} from 'react-router'; class HomeSection extends React.Component { static contextTypes = { router: PropTypes.func.isRequired }; constructor(props, context) { super(props, context); } handleClick = () => { console.log('HERE!', this.contextTypes); // this.context.location.transitionTo('login'); }; render() { return ( <Grid> <Row className="text-center"> <Col md={12} …

94 javascript  reactjs 

我有两个组件： 父组件，我想从中更改子组件的状态： class ParentComponent extends Component { toggleChildMenu() { ????????? } render() { return ( <div> <button onClick={toggleChildMenu.bind(this)}> Toggle Menu from Parent </button> <ChildComponent /> </div> ); } } 和子组件： class ChildComponent extends Component { constructor(props) { super(props); this.state = { open: false; } } toggleMenu() { this.setState({ open: !this.state.open …

94 javascript  reactjs 

除了可以在NavLink上设置“ activeClassName”和“ activeStyle”之外，在网站上创建指向非导航元素（例如，页眉或页脚中的非主导航）上的其他路线的链接时，是否有任何理由在链接上使用NavLink不需要活动状态/类？

94 reactjs  react-router  react-router-v4 

我是webpack的新手，我发现在生产版本中我们可以减少整体代码的大小。目前，webpack构建大约8MB的文件，而main.js构建大约5MB的文件。如何减少生产构建中的代码大小？我从互联网上找到了一个样本Webpack配置文件，并为我的应用程序进行了配置，然后运行npm run build并开始构建它，并在./dist/目录中生成了一些文件。 这些文件仍然很重（与开发版本相同） 如何使用这些文件？目前，我正在使用webpack-dev-server运行该应用程序。 package.json文件 { "name": "MyAPP", "version": "0.1.0", "description": "", "main": "src/server/server.js", "repository": { "type": "git", "url": "" }, "keywords": [ ], "author": "Iam", "license": "MIT", "homepage": "http://example.com", "scripts": { "test": "", "start": "babel-node src/server/bin/server", "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors" }, …

93 node.js  reactjs  npm  webpack  webpack-dev-server 

我偶尔会有一些react组件，这些组件在概念上是有状态的，需要重设。理想的行为等同于删除旧组件并读取新的原始组件。 React提供了一种方法setState，该方法允许将组件设置为自己的显式状态，但不包括隐式状态（例如浏览器焦点和表单状态），并且还排除其子级状态。捕获所有这些间接状态可能是一项艰巨的任务，我宁愿严格而彻底地解决它，而不是在每一个令人惊讶的新状态下打个mol子。 是否有API或模式可以做到这一点？ 编辑： 我做了一个简单的例子证明了this.replaceState(this.getInitialState())方法并与对比它this.setState(this.getInitialState())的方法：的jsfiddle - replaceState更强劲。

93 reactjs 

在浏览某些页面的HTML时，我注意到其中一些页面使用此属性“ data-reactid”，例如： <a data-reactid="......" ></a> 该属性是什么，其功能是什么？

93 javascript  html  reactjs 

我正在使用新的React Context API而不是Redux开发一个新应用，并且在使用之前，例如Redux，当我需要获取用户列表时，我只是调用componentDidMount我的操作，但是现在使用React Context，我的操作可以在内部进行。我的使用者位于我的渲染函数中，这意味着每次调用我的渲染函数时，它将调用我的操作以获取用户列表，这不好，因为我将执行许多不必要的请求。 那么，如何只能一次调用动作，例如incomponentDidMount而不是in render？ 只是为了举例说明，请看以下代码： 假设我将所有内容包装Providers在一个组件中，如下所示： import React from 'react'; import UserProvider from './UserProvider'; import PostProvider from './PostProvider'; export default class Provider extends React.Component { render(){ return( <UserProvider> <PostProvider> {this.props.children} </PostProvider> </UserProvider> ) } } 然后，我将这个Provider组件包装了所有应用程序，如下所示： import React from 'react'; import Provider from './providers/Provider'; import { Router } …

93 reactjs  react-context 

创建React应用时，默认情况下会调用Service Worker。为什么要使用服务人员？默认调用的原因是什么？

93 javascript  reactjs  service-worker 

这是我的项目：https://github.com/kenpeter/my_hak_news，这是直接拷贝https://github.com/grigio/HAgnostic-News。 Git克隆https://github.com/kenpeter/my_hak_news，然后运行react-native run-android 得到这个错误： * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to finalize session : INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package com.hagnosticnews signatures do not match the previously installed version; ignoring! 相关问题：https : //github.com/grigio/HAgnostic-News/issues/1，我遵循各种方法，但无法解决此问题。

93 android  reactjs  react-native 

我正在React的一个项目上工作，遇到了一个让我感到困惑的问题。 每当我运行时yarn start，都会出现此错误： TypeError [ERR_INVALID_ARG_TYPE]：“路径”参数必须为字符串类型。接收类型未定义 我不知道为什么会这样，如果有人经历过，我将不胜感激。

92 javascript  reactjs  redux  visual-studio-code  yarnpkg 

是什么引起以下问题？我的Android SDK版本不受支持吗？ Starting JS server... Building and installing the app on the device (cd android && gradlew.bat installDebug)... FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ':app'. > failed to find Build Tools revision 23.0.1

92 javascript  android  reactjs  react-native 

我想动态地包含/忽略按钮元素上的disabled属性。我已经看到了许多有关动态属性值的示例，但没有看到属性本身的示例。我有以下渲染功能： render: function() { var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : ""; return <button {maybeDisabled}>Clear cart</button> } 由于出现了“ {”字符，因此引发了解析错误。如何基于AppStore.cartIsEmpty（）的（布尔值）结果包含/忽略禁用的属性？

92 reactjs 

据我所知并纠正我是否有错，redux-thunk是一个中间件，可以帮助我们在操作本身中调度异步函数和调试值，而当我使用redux-promise时，如果不实现自己的方法就无法创建异步函数作为Action的机制抛出仅分配纯对象的异常。 这两个软件包之间的主要区别是什么？在单个页面的React应用程序中同时使用两个软件包是否有任何好处，或者坚持redux-thunk就足够了？

92 reactjs  redux  redux-thunk  redux-promise 

我正在分解Redux的todo示例以尝试理解它。我读到它mapDispatchToProps允许您将调度动作映射为道具，因此我想到重写addTodo.js以使用mapDispatchToProps而不是调用dispatch（addTodo（））。我叫它addingTodo()。像这样： import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({addingTodo}) => { let input; return ( <div> <form onSubmit={e => { e.preventDefault() if (!input.value.trim()) { return } addingTodo(input.value) input.value = "" }}> <input ref={node => { input = node }} /> <button type="submit">Submit</button> …

92 javascript  reactjs  redux  react-redux 

在我的react组件中，我尝试在ajax请求进行时实现一个简单的微调器-我使用状态来存储加载状态。 由于某种原因，我的React组件下面的这段代码抛出此错误 只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是无人值守。请检查未定义组件的代码。 如果我摆脱了第一个setState调用，错误就会消失。 constructor(props) { super(props); this.loadSearches = this.loadSearches.bind(this); this.state = { loading: false } } loadSearches() { this.setState({ loading: true, searches: [] }); console.log('Loading Searches..'); $.ajax({ url: this.props.source + '?projectId=' + this.props.projectId, dataType: 'json', crossDomain: true, success: function(data) { this.setState({ loading: false }); }.bind(this), error: function(xhr, status, err) …

92 javascript  ajax  reactjs  state