Questions tagged «reactjs»

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

9
如何切换反应组件的布尔状态?
我想知道如何切换React组件的布尔状态。例如: 我在组件的构造函数中进行了布尔状态检查: constructor(props, context) { super(props, context); this.state = { check: false }; }; 我试图每次使用this.setState方法切换复选框时的状态: <label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label> 当然,我得到了Uncaught ReferenceError:未定义检查。那么我该如何实现呢? 提前谢谢了。

3
反应路由器v ^ 4.0.0未捕获的TypeError:无法读取未定义的属性“位置”
我在使用React Router时遇到了一些麻烦(我使用的是version ^ 4.0.0)。 这是我的index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, Link, browserHistory } from 'react-router'; ReactDOM.render( <Router history={browserHistory} > <Route path="/" component={App} /> </Router>, document.getElementById('root') ); App.js就是任何东西。我在这里发布基本的,因为这不是问题(我相信) import React, { Component } from 'react'; import logo from …

3
实际上,useCallback和useMemo有什么区别?
也许我误会了一些东西,但是useCallback Hook每次重新渲染时都会运行。 我传递了输入-作为useCallback的第二个参数-不可更改的常量-但返回的备注回调在每次渲染时仍运行我的昂贵计算(我很确定-您可以在下面的代码段中自行检查)。 我已经将useCallback更改为useMemo,并且useMemo可以按预期工作—在传递的输入更改时运行。并真正记住了昂贵的计算。 现场示例: 'use strict'; const { useState, useCallback, useMemo } = React; const neverChange = 'I never change'; const oneSecond = 1000; function App() { const [second, setSecond] = useState(0); // This 👇 expensive function executes everytime when render happens: const calcCallback = useCallback(() => expensiveCalc('useCallback'), [neverChange]); …
85 reactjs 

11
React-Router在新标签页中打开链接
有没有办法让React Router在新标签页中打开链接?我尝试了一下,但没有成功。 <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> 可以通过向onClick="foo"Link添加类似于我上面的内容来使其模糊,但是会出现控制台错误。 谢谢。

9
元素隐式地具有“ any”类型,因为类型“ string”的表达式不能用于索引
为React项目尝试TypeScript,我陷入了这个错误: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; }'. No index signature with a parameter of type 'string' was found on type '{ train_1: boolean; train_2: boolean; train_3: boolean; train_4: boolean; …

18
在反应导航中禁用后退按钮
我正在使用react本机导航(react-navigation)StackNavigator。它从应用程序整个生命周期的“登录”页面开始。我不想返回选项,返回“登录”屏幕。有谁知道登录屏幕后如何将其隐藏在屏幕上?顺便说一句,我也使用以下命令将其隐藏在登录屏幕中: const MainStack = StackNavigator({ Login: { screen: Login, navigationOptions: { title: "Login", header: { visible: false, }, }, }, // ... other screens here })

6
在Redux中更新状态后如何触发回调?
在React中,状态不会立即更新,因此我们可以在中使用回调setState(state, callback)。但是在Redux中如何做呢? 调用之后this.props.dispatch(updateState(key, value)),我需要立即对更新后的状态进行处理。 有什么方法可以像我在React中那样以最新状态调用回调?

10
React / Redux-在应用加载/初始化时调度动作
我从服务器获得令牌身份验证,因此在最初加载我的Redux应用程序时,我需要向该服务器发出请求,以检查用户是否已通过身份验证,如果是,我应该获得令牌。 我发现不建议使用Redux核心INIT操作,因此如何在呈现应用程序之前调度操作?
85 reactjs  redux 

7
如何有条件地包装React组件?
我有一个组件,有时有时需要呈现为<anchor>和,有时需要呈现为<div>。在prop我读来确定这一点,是this.props.url。 如果存在,则需要渲染包裹在中的组件<a href={this.props.url}>。否则,它将仅呈现为<div/>。 可能? 这是我现在正在做的,但是感觉可以简化: if (this.props.link) { return ( <a href={this.props.link}> <i> {this.props.count} </i> </a> ); } return ( <i className={styles.Icon}> {this.props.count} </i> ); 更新: 这是最终的锁定。感谢您的提示,@ Sulthan! import React, { Component, PropTypes } from 'react'; import classNames from 'classnames'; export default class CommentCount extends Component { static propTypes = …

5
找不到模块“ babel-core”中的错误。使用react.js,webpack和express服务器
每当我webpack在终端上运行时,我都会得到: Hash: efea76b1048c3a97b963 Version: webpack 1.12.13 Time: 33ms + 1 hidden modules ERROR in Cannot find module 'babel-core' 这是我的webpack.config.js文件 module.exports = { entry: './app-client.js', output: { filename: 'public/bundle.js' }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: 'babel' } ] } } package.json { "name": "react", "version": "1.0.0", "description": "React …

1
Redux不只是美化了全球状态吗?
所以我一周前开始学习React,我不可避免地遇到了状态问题以及组件应该如何与应用程序的其余部分进行通信。我四处搜寻,Redux似乎是本月的风土人情。我通读了所有文档,我认为这实际上是一个非常革命性的想法。这是我的想法: 人们普遍认为状态是非常邪恶的,并且是编程中大量错误的来源。Redux并未将所有内容分散在整个应用程序中,而是为什么不将所有内容都集中在必须发出更改操作的全局状态树中?听起来不错。所有程序都需要状态,因此让我们将其停留在一个不纯净的空间中,并仅在该空间内对其进行修改,以便轻松查找错误。然后,我们还可以声明性地将各个状态块绑定到React组件,并使它们自动重绘,并且一切都很好。 但是,我对整个设计有两个问题。首先,为什么状态树需要不可变?说我不在乎时间旅行调试,热重装,并且已经在我的应用程序中实现了撤消/重做。要做这件事似乎很麻烦: case COMPLETE_TODO: return [ ...state.slice(0, action.index), Object.assign({}, state[action.index], { completed: true }), ...state.slice(action.index + 1) ]; 代替这个: case COMPLETE_TODO: state[action.index].completed = true; 更不用说我正在制作一个在线白板以学习,每个状态更改都可能像在命令列表中添加笔刷一样简单。一段时间后(数百个笔触),复制整个阵列可能开始变得非常昂贵和费时。 我可以接受一个全局状态树,该状态树与通过操作进行更改的UI无关,但是它真的需要不可变吗?像这样的简单实现有什么问题(草稿很粗。写在1分钟内)? var store = { items: [] }; export function getState() { return store; } export function addTodo(text) { store.items.push({ "text": text, "completed", false}); …

13
反应onClick和preventDefault()链接刷新/重定向?
我正在渲染一个带有react的链接: render: -> `<a className="upvotes" onClick={this.upvote}>upvote</a>` 然后,上面有upvote函数: upvote: -> // do stuff (ajax) 在链接建立之前,我已经跨过那个地方,但是我需要切换到链接,这就是麻烦了-每次我.upvotes刷新页面时,到目前为止,我已经尝试过以下操作: event.preventDefault()-不起作用。 upvote: (e) -> e.preventDefault() // do stuff (ajax) event.stopPropagation()-不起作用。 upvote: (e) -> e.stopPropagation() // do stuff (ajax) 返回false-不起作用。 upvote: (e) -> // do stuff (ajax) return false 我也已经在index.html中使用jQuery尝试了上述所有方法,但似乎没有任何效果。我在这里应该做什么,我做错了什么?我已经检查了event.type,click因此我想应该可以避免以某种方式重定向? 对不起,我是React的新秀。 谢谢!

4
React中引用的正确原型是什么?
我在我的redux存储中存储了一个引用,并使用mapStateToProps公开了需要访问它的组件的引用。 存储的ref如下所示: ref={node => this.myRefToBePutInReduxGlobalStore = node} 此引用的正确propType是什么?
84 reactjs 

20
npm create-react-app启动错误
我有一个项目,我两个星期都没碰过。我将其取回,现在尝试运行时npm start出现此错误。 > react-scripts start sh: react-scripts: command not found npm ERR! Darwin 16.0.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node v6.7.0 npm ERR! npm v3.10.3 npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! UpScore@0.6.0 start: `react-scripts start` …

5
如何禁用文件中的ESLint react / prop-types规则?
我使用React和ESLint用eslint-plugin-react。 我想disable在prop-types一个文件中的规则。 var React = require('react'); var Model = require('./ComponentModel'); var Component = React.createClass({ /* eslint-disable react/prop-types */ propTypes: Model.propTypes, /* eslint-enable react/prop-types */ render: function () { return ( <div className="component"> {this.props.title} </div> ); } });
84 reactjs  eslint 

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.